Bootstrap - 如何水平排列项目而不会破坏它们？

Question

请参阅JSbin example。

HTML：

  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h2>Hi</h2>
        <p>Some text here!</p>
        <ul>
          <li>List</li>
          <li>of</li>
          <li>items</li>
        </ul>
      </div>

      <div class="col-sm-4">
        <h2>Hi</h2>
        <p>Some text here! This is a bit longer than the others, causing the list to be pushed down and not look so nice.</p>
        <ul>
          <li>List</li>
          <li>of</li>
          <li>items</li>
        </ul>
      </div>

      <div class="col-sm-4">
        <h2>Hi</h2>
        <p>Some text here!</p>
        <ul>
          <li>List</li>
          <li>of</li>
          <li>items</li>
        </ul>
      </div>
    </div>
  </div>

我无法弄清楚如何将<ul>全部水平对齐（顶部）。我想把它们分成下一行可以工作，但是当在移动设备上查看时，它显然会列出三个项目中每个项目的所有标题文本，然后是三组列表项目。

举例说明：

但重要的一点是，当用户在iPad或iPhone上观看时，这三个＆＃34; Hi＆＃34;项目将叠加在一起，因此通过height或min-height添加的任何空间都会非常糟糕。

Answer 1

快速解决方法是将标题和相关文字放入包装中并为其指定min-height

HTML：

<div class="headline">
    <h2>Hi</h2>
    <p>Some text here!</p>
</div>

CSS：

.headline { min-height: 100px; }

只要没有.headline越过最小高度，这将保持列表对齐。

另一种解决方案是使用Javacript动态调整标题的高度，使其等于最高标题。

Answer 2

CSS代码：

li{display: inline;}/*to align horizontal list*/

Answer 3

您应该使用col-xs-4类而不是col-sm-4。 sm不适用于小型移动屏幕。见http://getbootstrap.com/css/#grid-options