Html 引导网格垂直而不是水平

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

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

这是我目前使用的代码

<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>

---

您希望使用四幅图像组成的网格来获取所有水平空间。所以你基本上需要4列。由于twitter引导基于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>

---

图像正在下降，因为这是

col-md-3

引导类的实际行为。

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>

请参见试试这个

<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>

---

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

谢谢……：）@约翰多

  <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>