0

我只是在尝试引导程序，它看起来很棒，但我遇到了一个似乎很难解决的问题，而不是看起来正确。

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

x x x
x x x
x x x

哪个（据我了解）必须在引导程序中像这样编码：

<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 次监视一次，然后关闭该行并开始一个新行？我认为这是引导程序能够自行处理的事情。

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

1 回答 1

1

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

为您的动态内容创建一个新容器，然后简单地将所有内容转储到同一行中。然后使用 CSS:nth 子选择器选择第 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 -->

希望这可以帮助

于 2013-01-06T15:51:52.523 回答