1

したがって、新しい Bootstrap v3 コードは次のようになります。

<div class="row">
    <div class="col-md-4 bg-red">
       <h2>Heading</h2>
       <p>My text here...</p>
    </div>
    <div class="col-md-4 bg-green">
       <h2>Heading</h2>
       <p>My text here...</p>
    </div>
    <div class="col-md-4 bg-blue">
       <h2>Heading</h2>
       <p>My text here...</p>
    </div>
</div>

Bootstrap 3 では列の余白が削除されたため (左右にパディングが追加されました)。class="col-lg-4"div に背景色を設定し、各 div 間にページ背景のギャップを設けるにはどうすればよいですか?

class="col-lg-4"注: divの背景色である必要があります。

4

2 に答える 2

1

1 つの方法は、デフォルトのように境界ボックスではなく、コンテンツ ボックスにペイント領域がクリップされるようにbackground-clip、値を指定してプロパティを使用することです。content-box.col-lg-4

于 2013-09-02T19:50:06.830 に答える
0

.col-*-3マージンを追加して使用します。4 つの列がありますが、4 番目は使用されておらず、余白の余地があります。次に例を示します。

http://www.bootply.com/R9iSDcNuzY

HTML 
<div class="row">
    <div class="col-md-3 bg-danger col-margin">
       <h2>Heading</h2>
       <p>My text here...</p>
    </div>
    <div class="col-md-3 bg-success col-margin">
       <h2>Heading</h2>
       <p>My text here...</p>
    </div>
    <div class="col-md-3 bg-primary col-margin">
       <h2>Heading</h2>
       <p>My text here...</p>
    </div>
</div>
CSS 
/* CSS used here will be applied after bootstrap.css */
.col-margin{
    margin: 10px;
}
于 2015-04-09T23:44:46.743 に答える