Question

我只是尝试使用bootstrap而且看起来很棒，但是我遇到的问题看起来似乎太难解决了。

我有一个类似砖石的格式，显示三列，然后无限次地进入一个新行。

x x x
x x x
x x x

其中（据我所知）必须在bootstrap中编码如下：

<div class="container-fluid">
<div class="row">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>
<div class="row">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>
<div class="row">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>

但这是否意味着在我的代码（例如rails）的视图中，我需要做一些循环，每3次监视一次，然后关闭该行并开始一个新的？我认为这是bootstrap能够独立处理的东西。

for($i=0;i<3;i++) {
   do something
}

Answer 1

这对你有用吗？ http://jsfiddle.net/panchroma/9RrX7/

为动态内容创建一个新容器，然后将所有内容转储到同一行。然后使用CSS：第n个子选择器来选择第4，第7，...动态内容项并调整CSS以使浮动正常工作。

我添加了一些额外的内容来检查浮动和调整大小是否正常工作。

CSS

.dynamic .row .span4:nth-child(3n+4) {  
clear:both;
}

HTML

<div class="container-fluid">
<div class="row">
<div class="span4">X</div>
<div class="span4">X</div>
<div class="span4">X</div>
</div>
<div class="row">
<div class="span4">X</div>
<div class="span4">X</div>
<div class="span4">X</div>
</div>
<div class="row">
<div class="span4">X</div>
<div class="span4">X</div>
<div class="span4">X</div>
</div>
</div>

</div><!-- end container -->

<div class="container-fluid dynamic">
<div class="row">

<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<!-- repeat as req'd -->
</div><!-- end row -->
</div><!-- end container -->

=============================================== =========

可以使用javascript或php添加动态HTML。例如，假设您使用的是php，内容来自数据库，而您的引导页面是.php。

引导页面的总体布局可能是这样的：

<?php connect to database and read in data ?>

<head> ...</head>
<body>
.......
......

<div class="container-fluid dynamic">
<div class="row">

<?php loop through data ?>
<div class="span4"> <?php echo $item data ?> </div>
<?php end loop ?>

</div><!-- end row -->
</div><!-- end container -->

希望这有帮助

动态关闭bootstrap中的row div

1 个答案: