4

赤でマークされた領域を白で塗りつぶす必要があります

Bootstrap 3 を使用するサイトに取り組んでいます。サイトは主に暗い背景色を使用しますが、ロゴとメニューを含むヘッダー行の背景色は白にする必要があります。でも！幅全体 (「コンテナー」の境界まで) を白色で塗りつぶしたくありません。添付の画像は、私がやりたいことを示しています。行には 2 つの列が含まれており、1 つは 2 列幅で、もう 1 つは 10 列幅です。行全体を白で塗りつぶしたいのですが、「パディング」または緑でマークされたマージンにまたがらせたくありません（これらは青のままです）。これを行うための最良の提案は何ですか?

OK、説明が下手かもしれませんが、もう一度試してみます;)

私が望むものをよりよく示すために、与えられた例を拡張しました: http://jsfiddle.net/RedRockerSE/47Fsr/

方法がわかりbackground-clip: content-box;ません。これを行いますか?

外側の「パディング/マージン/ガター」領域（下の矢印でマークされている）を背景色で塗りつぶしたい（または、必要に応じて行の背景色で塗りつぶさないでください）。列間の「パディング/マージン/ガター」領域は、行の背景色で埋める必要があります。 ここに画像の説明を入力

4

3 に答える 3

-1

あなたはこれを行うことができます;

[class^=col-].no-space-left {
 padding-left:0;
}

[class^=col-].no-space-right {
  padding-right:0;
}

内側の div パディングを追加します。

[class^=col-].no-space-left > div {
  padding:0 15px
  /*padding-right:15px;*/ /*if you want no space between col- */
}

[class^=col-].no-space-right > div {
    padding:0 15px
  /*padding-left:15px;*/ /*if you want no space between col- */
}

http://jsfiddle.net/47Fsr/32/

于 2016-10-18T13:15:03.273 に答える
-1

.row .no-gutter を使用してみてください

HTML

<div class="container">
<div class="row no-gutter">
     <div class="col-xs-4"></div>
     <div class="col-xs-4"></div>
     <div class="col-xs-4"></div>
</div>

CSS

body {
    background-color: #f00;
}
.col-xs-4 {
    background-color: #fff;
    height: 100px;
}

http://jsfiddle.net/47Fsr/7/

于 2015-03-25T09:41:26.260 に答える