11

私は現在プロジェクトに取り組んでおり、レスポンシブグリッドを含む素晴らしいTwitterBootrtrapを試しています。1つの問題を除いて、すべてが正常に機能し、ダンディです。

.container（グリッドを保持する）背景色をどのように指定しますか？例：

<div class="container green">
    <div class="row">
        <div class="span6">
            <p>This is a test</p>
        </div>
    </div>
    <div class="row">
        <div class="span6">
            <p>This is a test</p>
        </div>
    </div>
</div>

.green{
 background:green;
}

コンテナに色を追加すると、緑色に変わりますが、左側に約20pxの余白が残ります。全幅の背景を実装するにはどうすればよいですか？

4

3 に答える 3

19

あなたが見ているそのマージンは、グリッドシステムのクラス部分が各行内.rowのクラスを収容するために左から20pxを削除するという事実によるものです。spanそのクラスは次のようになります。

.row {
    margin-left: -20px;
}

.container次のように、選択した背景色の別のコンテナでdivをラップするだけで、これを回避できます。

HTML

<div class="green">
    <div class="container">
        <div class="row">
            <div class="span6">
                <p>This is a test</p>
            </div>
        </div>
        <div class="row">
            <div class="span6">
                <p>This is a test</p>
            </div>
        </div>
    </div>
</div>

CSS

.green{
    background:green;
}
于 2012-04-05T19:22:48.163 に答える
2

試す

body {
    background-color: green;
}

.container {
    background-color: transparent;
}
于 2012-04-05T16:57:38.933 に答える
0

これを試してみてください、私にとってはその仕事です、あなたのコードをこのようにラップしてください。

<div class="rowWrp">
    <div class="row colorBg">
        <div class="span6">
            <p>This is a test</p>
        </div>
    </div>
</div>

CSS it：

.colorBg {
   background:red;
  }

.rowWrp {
  background:red; 
  width:940px; 
  padding-right:20px;
  }

ここでは、固定レイアウトを使用すると仮定します。

于 2013-04-01T04:33:47.437 に答える