12個のブートストラップカラムを持つdivがあります。左側の列の右半分に半分の余白を追加するにはどうすればよいですか？ブートストラップのカラム外の半分の幅のマージン
ここが出発点です。
HTML：
<div class="row">
<div class="col-md-12 takes12Columns">
DIV WHICH TAKES 12 COLUMNS
</div>
</div>
CSS：
.takes12Columns
{
background: red;
text-align: center;
}
https://jsfiddle.net/1gpna1h5/。
を参照してください。これを行う方法はありません標準のブートストラップでカスタムビルドを24列で作成することも、カスタム列クラスを作成して8.33333％の列単位の1/2に相当するマージンを追加することもできます。次に、rowの通常の負のマージンを減算します。
.row-custom {
margin-left: calc(4.166666% - 15px);
margin-right: calc(4.166666% - 15px);
}
また、rowは常にcontainerの内側に配置する必要があります。
なぜ列は常にコンテナの内側にあるべきですか？ –
"行は適切な整列とパディングのために.container（固定幅）または.container-fluid（全幅）内に配置する必要があります。 __ http://getbootstrap.com/css/#grid – ZimSystem
ご注意いただきありがとうございます。 –
、あなたがmargin-rightやmargin-leftを使用することができます上記の場合には、列の側に変更を加えることがcontainer-fluidや単純なcontainerクラスを使用することができ、ブートストラップ使用している場合は
ありがとうございました。しかし、それは私が必要なものではありません。それはマージンに動的に影響しません。上記は適切な答えです。 –
私は分かりません。 col-md-12はすでに15 pxの左右にパディングがあります。マージンを追加する場合は、 'margin-left'、' margin-right'を使用してください。 – ZimSystem
@ZimSystem、申し訳ありません。私が間違えました。私はマージンを意味し、パディングはしません。 jsfiddleを見れば、私が望むものを手に入れることができます。私は、列の半分の後にdivを開始し、最後まで列の半分の前に終了したい。 –
@ ZimSystem、マージンはどこに追加しますか？行またはcol-MD-12に？私は15 pxでなく、列のちょうど半分を必要とします。サイズ変更時に動的に変更されます。 –