html - 是否可以将 Bootstrap 列 "snap"放置到位？

Question

我在使用 Bootstrap 时遇到了一个小问题，我找不到解决方案。那里可能有解决方案，但我无法确定要搜索的内容。

我想知道的是，如果有一种方法可以使列相互对齐，那么就不会像 fiddle 中所示那样在左侧第一个 div 下方出现大间隙。我希望 fiddle 能够很好地描述问题，以便有人为我指明正确的方向。

fiddle :https://jsfiddle.net/DTcHh/24238/

body {
  background: tomato;
}
.container {
  background: white;
  border: 1px solid grey;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>

  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>

  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>

  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>

  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>

  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200" />
      <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200" />
      <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200" />
      <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>
</div>

Answer 1

Bootstrap 网格结构中的问题。您在“ROW”和“COL-MD-”下使用“容器”类，这就是您遇到问题的原因。

Working fiddle:   https://jsfiddle.net/amitmonsterme/veyq6naL/ 

view this tutorial :   http://getbootstrap.com/css/#overview-container