是否可以使引导列“快速”到位？
Posted
技术标签:
【中文标题】是否可以使引导列“快速”到位？【英文标题】：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" 是一个引导类。您不应该将其添加到列中 【参考方案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>【讨论】：
以上是关于是否可以使引导列“快速”到位？的主要内容，如果未能解决你的问题，请参考以下文章