将 div 与 Bootstrap 列中的相邻 div 对齐

Posted 2023-03-05

【中文标题】将 div 与 Bootstrap 列中的相邻 div 对齐

【英文标题】：Align div to adjacent div in Bootstrap columns

【发布时间】：2021-08-30 21:13:32

【问题描述】：

是否可以将 Bootstrap 列中的内容垂直对齐到另一个 div 的内容？

我有两列，A 和 B 彼此相邻。 单击 B 列中的项目时，A 列中会出现一个单词列表。 我希望 A 中的这个单词集合垂直居中于 B 中的选定单词周围。

这是一个 JSFiddle，它对正在发生的事情有一个基本的想法，没有垂直居中

https://jsfiddle.net/so4902r8/5/

html

<div class="row">
  <div class="col-2 offset-4">   
    <div id="wordList1">
      [text]
    </div>
    <div id="wordList2">
      [text]
    </div>
  </div>
  <div id="clickMes" class="col-2">
    <div id="clickMe1">
      <a onClick="clickMe1()">Click Me 1</a>
    </div>
    <div id="clickMe2">
      <a onClick="clickMe2()">Click Me 2</a>
    </div>
  </div>
</div>

JS

function clickMe1() 
var x = document.getElementById("wordList1");
  if (x.style.display === "none") 
x.style.display = "block";
document.getElementById("wordList2").style.display = "none";
   else 
x.style.display = "none";
  



function clickMe2() 
var x = document.getElementById("wordList2");
  if (x.style.display === "none") 
    x.style.display = "block";
    document.getElementById("wordList1").style.display = "none";
   else 
    x.style.display = "none";
  

【参考方案1】：

通常这将是 Vertical Align Center in Bootstrap 和 Bootstrap Center Vertical and Horizontal Alignment 的副本

但是，此 CSS 规则应用的顶部填充会阻止 align-items-center 按预期工作...

.clickMes 
  padding-top: 50px;

因此，删除顶部填充并在行上使用align-items-center。

Demo

【讨论】：

感谢您的回复。但是，这不是我想要的，原因有两个。 1 - A 列中的单词不是垂直居中在 B 列中单击的单词周围。例如，如果我单击“Click Me 1”，则“Intellegam”一词应与“Click Me 1”的左侧相邻，但是它在它下面 2 - B 列中的单词垂直移动，无论是在单词第一次出现时，还是在单词发生变化时。我希望 B 列垂直固定