web-dev-qa-db-ja.com

Twitter Bootstrap 3：小さなオフセット/マージン

私はTwitterを使用していますbootstrap 3.必要なのは、グリッドサイズよりも小さい2つのdiv間のマージンです（そのため、col-md-offset- *は機能しません）。

<div id="content-row" class="row">
    <div class="col-md-offset-2 col-md-2 content">
        some content
    </div>
    <div id="content" class="col-md-offset-1 col-md-5 content">
        some other content
    </div>
</div>

これを実現するためのTwitterブートストラップの方法は何ですか？確かに、マージンを定義するだけでも、Twitterブートストラップの行/列レイアウトが壊れるので、もっと良い解決策があるはずだと感じています。

htmlcsstwitter-bootstraptwitter-bootstrap-3
10
nanoquack

デフォルトでは、すべての列の両側に15pxのパディングがあります。これにより、15x2 = 30ピクセルのガターが構成されます。コンテンツまたは列に背景色を追加して、ガターを表示します。スペースをcol-md-offset-1よりも小さくするには、ネストを使用できます。これにより、col-md-offset-1/2のスペースが作成されます。他のソリューションでは、ガターを使用できます。溝はパディングによって構築されるため、グリッドを壊さずにスペースを操作できます（パディング）。

以下の例をご覧ください。コードにサイドバーを追加して、グリッドが壊れないようにします。

<div class="container">     

Your solution:<br>

<div id="content-row" class="row">
    <div class="col-md-offset-2 col-md-2 content" style="background-color:green">
        some content
    </div>
    <div id="content" class="col-md-offset-1 col-md-5 content" style="background-color:orange">
        some other content
    </div>
    <div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>

half size with nesting:<br>

<div id="content-row" class="row">
    <div class="col-md-offset-2 col-md-2 content" style="background-color:green">
        some content
    </div>
    <div id="content" class="col-md-6 content" style="background-color:orange">
        <div class="row">
            <div id="content" class="col-md-offset-1 col-md-11 content content" style="background-color:pink">
                some other content
            </div>  
        </div>  
    </div>
    <div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>

space of the Gutter:<br>

<div id="content-row" class="row">
    <div class="col-md-offset-2 col-md-2 content" style="background-color:green">
        some content
    </div>
    <div id="content" class="col-md-6 content" style="background-color:orange">
        <div style="background-color:red;">some other content</div>
    </div>
    <div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>

Manipulated space of the Gutter, using padding won't break the grid:<br>

<div id="content-row" class="row">
    <div class="col-md-offset-2 col-md-2 content" style="background-color:green">
        some content
    </div>
    <div id="content" class="col-md-6 content" style="background-color:orange; padding-left:1px; padding-right:0">
        <div style="background-color:red;">some other content</div>
    </div>
    <div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>

enter image description here

独自のグリッドをコンパイルして、必要に応じてガターを選択できます。 http://getbootstrap.com/customize/

19
Bass Jobsen