0

span6 を持つ div の間にスペースを確保しようとしています-margin-left:またはmargin-right:20px の間隔のマージンがある場合、右側の残りのスペースは約 20px です。レイアウトが滑らかに見えるように、誰かが私の赤い div にスペースを持たせることができますか?

私のレイアウトには span12 と span6 があり、span6 は 2 つの div を続けて表示する必要があります。

jsフィドル

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">1</div>
        <div class="span6">2</div>
        <div class="span6">3</div>
        <div class="span12">4</div>
        <div class="span6">1</div>
        <div class="span6">2</div>
        <div class="span12">3</div>              
    </div>
</div>

これは私が使用しているCSSです：

.span12 {
    background-color:grey;
}
.span6 {
 background-color:red   
}
.row-fluid [class*="span"] {
margin-left:0px; margin-bottom:20px
}
.row-fluid .span6:nth-child(3n) {
   margin-left:20px
}
4

1 に答える 1

0

ブートストラップでは、行に含めることができる列は合計で最大 12 列のみです。この場合、非常に多くの列があります。

列数ではなく、12 + 6 + 6 などのスパン数の合計です。

複数の行に分割する必要があります

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            1
        </div>
    </div>
    <div class="row-fluid">
        <div class="span6">
            2
        </div>
        <div class="span6">
            3
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            4
        </div>
    </div>
    <div class="row-fluid">
        <div class="span6">
            1
        </div>
        <div class="span6">
            2
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            3
        </div>              
    </div>
</div>

デモ: Fiddle - レスポンシブ CSS が含まれていないため、結果パネルの幅を広げる必要があります

于 2013-07-18T03:03:00.083 に答える