Bootstrap网格垂直而不是水平

Question

我可能完全错了，但从我的理解来看，我认为我走的是正确的道路。

我试图让我的图像网格在水平线上并排，但它在我的页面上一直垂直。

这是我正在使用的当前代码。

<div class="row">
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="2" height="150" width="150">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="3" height="150" width="150">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="4" height="150" width="150">
    </div>
</div>

Answer 1

您想要拍摄具有四个图像网格的所有水平空间。所以你基本上想要4列。由于twitter-bootstrap基于12的网格，因此每列应该采用3。

您的行应如下所示：

<div class="row">
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="2" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="3" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="4" height="150" width="150">
    </div>
</div>

Answer 2

图像正在下降，因为它是col-md-3 bootstrap类的实际行为。 col-md-3的大小不能包含所有四个图像，因此会下降。

如果您希望图像水平对齐，则必须将html重写为

<div class="row">
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="2" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="3" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="4" height="150" width="150">
    </div>
</div>

请参阅fiddle

Answer 3

试试这个

<div class="row">
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
    </div>
</div>

Answer 4

您还可以在较大的列中创建内联列表。其中每个列表项之间都有填充。这提供了更好的外观。

http://codepen.io/anon/pen/vNboJz

  <div class="row">
    <div class="col-md-12">
      <ul class="list-inline">
        <li>
          <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
        </li>
        <li>
          <img src="http://i.imgur.com/SLUyAtG.png" alt="2" height="150" width="150">
        </li>
        <li>
          <img src="http://i.imgur.com/SLUyAtG.png" alt="3" height="150" width="150">
        </li>
        <li>
          <img src="http://i.imgur.com/SLUyAtG.png" alt="4" height="150" width="150">
        </li>
      </ul>
    </div>
  </div>