Question

所以我使用Bootstrap的网格来创建（特别是在这里）一些变量 T 的描述以及与之对应的滑块。问题是默认情况下这两个人没有垂直对齐（见here）。

我想知道我是否可以在不影响网格的情况下解决这个问题（以使其在移动版本中看起来更舒适）。最好的选择是使用一些 Bootsrap类的解决方案（不使用固定的像素大小）。

P.S。 如果重要的话，我正在使用jQuery UI Slider Pips作为我的.slider。

<div class="row">  
  <div class="col-sm-2 text-right">
    <h4>T<br> <small>Some Description</small></h4>
  </div>
  <div class="col-sm-10">
    <div class="slider"></div>
  </div>
</div>

UPD。对父母使用以下代码不是一种选择。

.sliderParent {
    display: flex;
    align-items: center;
}

它有助于固定定位 div ，但禁止Bootstrap的网格从 col-sm - * 过渡到 col-xs - * < / em>的

<div class="row sliderParent"> <div class="col-sm-3 col-xs-12"> ... </div> <div class="col-sm-9 col-xs-12"> ... </div> </div>

因此，如果有人可以提供其他建议，我将非常感激。 =）

UPD。我找到了解决方案here。不完全是我想要的，但至少功能不会受到影响。这是儿童 div 的类：

.vcenter { display: inline-block; vertical-align: middle; float: none; }

Answer 1

＆＃13;

<div class="row">  
  <div class="col-sm-2 text-right">
    <h4>T <small>Some Description</small></h4>
  </div>
  <div class="col-sm-10">
    <div class="slider"></div>
  </div>
</div>

＆＃13;

你所做的是在线上添加换行符。这就是你想要的吗？

Answer 2

您是否尝试过显示属性flex？

您可以将以下属性分配给父级。

display: flex;
align-items: center;

虽然这不是使用bootstrap类，但它不会破坏响应性。

Answer 3

我会为这些div定义一个高度，然后设置一个媒体查询，以便在到达特定的bootstrap断点时删除该定义的高度。

在Bootstrap中垂直对齐<div>

3 个答案: