Question

好吧，所以我已经完成并尝试了几种不同的解决方案，但我没有找到一种按照我想要的方式工作，因此我可以寻求帮助。

以下是我当前代码的示例：

<div class="row">
  <div class="col-md-3">
    <h3>
      Operating Systems:
    </h3>
  </div>
  <div class="col-md-8">
    <ul>
      <li>Windows</li>
      <li>Linux</li>
    </ul>
  </div>
</div>

这给了我以下内容：screenshot

将以下样式添加到列中：

<style>
.col-height {
  display: table-cell;
  float: none;
  height: 100%;
</style>

我得到它展示我想要的东西，当它扩展时，每列的文字都沿着顶部对齐。

这个问题是，当调整为小尺寸时，它会像显示here一样显示它，因为我希望它显示为硬件部分。

所以这是我的问题：是否有一种方法可以让bootstrap在两种情况下显示我想要的方式，还是我必须选择其中一种？

Answer 1

尝试将col-md-x更改为col-xs-x

Answer 2

使用媒体查询仅在较大宽度上应用居中样式。 h3的边距正在影响垂直对齐，因此您可能需要调整它。另外IMO，flexbox是一种更好的对齐方法......

@media (min-width:768px) {
    .flex {
        display:flex;
        align-items:center;
    }
    h3 {
        margin-top:5px;
    }
}

http://www.codeply.com/go/hR8GJDwdL1

如何使用引导程序垂直对齐不同大小的文本

2 个答案: