0

私はちょうどブートストラップを試していますが、それは素晴らしいようですが、正しいと思われるよりも解決するのが難しすぎると思われる問題に遭遇しています。

私は、3 つの列を表示し、新しい行に何度も移動する石積みのような形式を持っています。

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

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

ダイナミック 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-06T15:51:52.523 に答える