css – Bootstrap：具有容器流体和行未正确包装的Dyamic色谱柱

这是我目前看到的：

请注意,第二行未正确包装.代码如下：

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

知道为什么包装不正确吗？

好的,我明白了.它更像是 RTFM thing with responsive column resets.你基本上只能使用一个< div class =“row”>并且将所有列放入其中(即使它们最终出现在不同的行上),只要您在正确的位置放入适当的清除,例如,< div class =“clearfix visible-xs-block”> < / DIV取代.因此,在下面的示例中,我在XS视口上显示两列,在大视图端口和中视口上显示6列,在小视图端口上显示4列.

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