Css 引导：容器流体和行未正确包装的动态列
以下是我目前看到的情况： 请注意，第二行没有正确包装。代码如下所示：Css 引导：容器流体和行未正确包装的动态列,css,html,twitter-bootstrap-3,Css,Html,Twitter Bootstrap 3,以下是我目前看到的情况： 请注意，第二行没有正确包装。代码如下所示： <div class="container-fluid"> <div class="row clearfix"> <div class="col-md-2 bit clearfix"> <div class="clearfix"> <div class="image-preview">
<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>
.... 重复。。。。
知道为什么包装不正确吗？当你说col-md-2时，它意味着12列中有2列。。所以你需要在每一行中的6个div…每一行之后。。如果需要，可以使用clearfix div
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="col-md-2 bit">
<div class="image-preview">
<a href=""><img class="img-rounded img-responsive" src=""></a>
</div>
<h6><a href="">Some text</a></h6>
</div>
</div>
</body>
</html>
好的，我想出来了。这更像是一场战争。基本上，您可以只使用一个
<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>
{b的%s（位%）}
{%如果loop.index可被2%整除}
{%endif%}
{%如果loop.index可被4%整除}
{%endif%}
{%如果loop.index可被6%整除}
{%endif%}
{%endfor%}