動態關閉行div在引導

我只是試用bootstrap，它似乎很棒，但我遇到了似乎太難以解決的問題似乎似乎很好。動態關閉行div在引導

我有一個磚石般的格式，顯示三列，然後進入一個無限次的新行。

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>

但是，這是否在我的代碼視圖（如導軌）的意思，我需要做一些循環，每3次監視一次，然後關閉該行並啓動一個新循環？我認爲這是bootstrap能夠自己處理的東西。

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

來源

2013-01-05 bswinnerton

請問這是否適合您？ 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 -->

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

動態HTML可以使用JavaScript或PHP添加。例如，假設您使用的是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-06 15:51:52

我不明白，這完全是靜態的。我想知道如何動態關閉行。 – bswinnerton

您好，澄清一下，您的問題是如何將未知數量的span4 div納入您的頁面，或者是如何將html代碼動態生成到您的bootstap佈局中？ –

我曾假設他們是同一件事。如果您要將未知數量的span4 div放入頁面中，您是否必須動態生成結尾行標記？ – bswinnerton

動態關閉行div在引導

回答

相關問題