是否可以使引导列“快速”到位？答案

【问题标题】：Is it possible to make bootstrap column "snap" into place?是否可以使引导列“快速”到位？
【发布时间】：2017-01-07 06:37:38
【问题描述】：

我正在使用 Bootstrap，但遇到了一个我找不到解决方案的小问题。那里可能有一个解决方案，但我一生都无法弄清楚要搜索什么。

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

小提琴：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>

【问题讨论】：

您在寻找砖石型 (masonry.desandro.com/options.html) 的东西吗？
你能告诉我们更多关于“大差距”的信息吗？小提琴对我来说看起来很标准。有一个标题、一些内容和一个分隔符。
@rns - 我会看看那个，看起来我可以使用的东西！但是，如果 Bootstrap 提供类似的东西，我会很高兴。我不需要所有花哨的动画，只需要让它按照自己的方式进行分类。
所以问题只在大屏幕上可见。如果您不知道容器的高度，就无法简单地修复它。你需要上面提供的类似 rsn 的东西。
"container" 是一个引导类。您不应该将其添加到列中

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您的引导网格结构存在问题。您在“ROW”和“COL-MD-”下使用“容器”类，这就是您面临问题的原因。

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

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

【讨论】：

【解决方案2】：

当屏幕宽度变为992px 或更大时，您可以将float: right 属性应用于特定块。为此，我定义了一个新的特殊类.pull-md-right。

请查看结果：https://jsfiddle.net/glebkema/9dqsj4pk/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

body {
    background: tomato;
}

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

@media (min-width: 992px) {
  .pull-md-right {
    float: right !important;
  }
}

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

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

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

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

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

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

【讨论】：