引导:具有容器流体和行的Dyamic柱不正确包装 [英] Bootstrap: Dyamic columns with container-fluid and row not wrapping properly
问题描述
这是我目前看到的:
请注意,第二行未正确包装。代码如下:
Notice that the second row isn't wrapping properly. The code looks like:
<div class="container-fluid">
<div class="row clearfix">
<div class="col-md-2 bit clearfix">
<div class="clearfix">
<div class="image-preview">
<a href=""><img src="" class="img-rounded img-responsive"/></a>
</div>
<h6><a href="">Some text</a></h6>
</div>
</div>
</div>
.... repeat ....
</div>
任何想法为什么包装不正确?
Any idea why the wrapping is incorrect?
推荐答案
好吧,我想出来了。这更像是一个具有响应列重置功能的RTFM 。你基本上只能使用一个< div class =row>
并把所有的列(即使他们最终出现在不同的行)因为您在正确的位置放置了正确的位置,例如< div class =clearfix visible-xs-block>< / div>
。因此,在下面的示例中,我在XS视口显示两列,在大视图和中视口上显示6列,在小视图端口显示4列。
OK, I figured it out. It's more of an RTFM thing with responsive column resets. You basically can use just one <div class="row">
and put all the columns in it (even if they end up appearing on different rows), as long as you put in the proper clear at the right position, e.g., <div class="clearfix visible-xs-block"></div>
. So in the below example, I'm displaying two columns on XS viewports, 6 columns on large and medium viewports, and 4 columns on small view ports.
<div class="container-fluid">
<div class="row">
{% for b in bits %}
<div class="col-xs-6 col-md-2 col-lg-2 col-sm-3 bit">
<h6><a target="_top" href="{{b.link}}">{{b.description}} </a></h6>
</div>
{% if loop.index is divisibleby 2 %}
<div class="clearfix visible-xs-block"></div>
{% endif %}
{% if loop.index is divisibleby 4 %}
<div class="clearfix visible-sm-block"></div>
{% endif %}
{% if loop.index is divisibleby 6 %}
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
{% endif %}
{% endfor %}
</div>
这篇关于引导:具有容器流体和行的Dyamic柱不正确包装的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!