Twitterのブートストラップで行を編集または上書きすることはお勧めできません。これはページの足場の中核部分であり、上部余白のない行が必要になるためです。
これを解決するには、代わりに、必要な標準マージンを追加する新しいクラス "top-buffer"を作成してください。
.top-buffer { margin-top:20px; }
そして、上マージンが必要な行のdivに使用します。
<div class="row top-buffer"> ...
何が起こったのかを知らせるためだけに、Acyraが上で述べたようにいくつかの新しいクラスを使うことを修正しました。
.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
<div class="row top7"></div>したいときはいつでも
応答性を良くするために、margin-top:7%の代わりに5pxを追加することができます。
ブートストラップ3
ブートストラップで行を分割する必要がある場合は、単純に.form-groupを使用できます。これにより、行の下部に15pxの余白が追加されます。
あなたの場合、マージントップを得るために、あなたは前の.row要素にこのクラスを追加することができます
<div class="row form-group">
/* From bootstrap.css */
.form-group {
margin-bottom: 15px;
}
ブートストラップ4
組み込みの 間隔クラスを使用することができます
<div class="row mt-3"></div>
クラス名の "t"は "top"側にのみ適用されます。下、左、右にも同様のクラスがあります。数値はスペースサイズを定義します。
ブートストラップ4 の間隔は、
速記ユーティリティクラス
次の形式で
{プロパティ} {サイド} - {サイズ}
propertyは次のいずれかです。
- m - マージンを設定するクラス用
- p - パディングを設定するクラス用
sidesは次のいずれかです。
- t - margin-topまたはpadding-topを設定するクラスの場合
- b - margin-bottomまたはpadding-bottomを設定するクラスの場合
- l - マージン左またはパディング左を設定するクラス用
- r - マージン権またはパディング権を設定するクラス用
- x - * -leftと* -rightの両方を設定するクラスの場合
- y - * -topと* -bottomの両方を設定するクラスの場合
- 空白 - 要素の4辺すべてに余白または余白を設定するクラスの場合
sizeは、次のいずれかです。
- 0 - 余白や余白を0に設定して削除するクラスの場合
- 1 - （デフォルトで）マージンまたはパディングを$ spacer * .25に設定するクラスの場合
- 2 - （デフォルトで）マージンまたはパディングを$ spacer * .5に設定するクラスの場合
- 3 - （デフォルトで）マージンまたはパディングを$ spacerに設定するクラスの場合
- 4 - （デフォルトで）マージンまたはパディングを$ spacer * 1.5に設定するクラスの場合
- 5 - （デフォルトで）マージンまたはパディングを$ spacerに設定するクラスの場合* 3
- auto - マージンを自動に設定するクラスの場合
だからあなたはこれらのいずれかをやっているはずです：
<div class="row mt-1">
<div class="row mt-2">
...
<div class="row mt-5">
マージントップが設計上の問題を引き起こすことがあります。
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
だから、私は「マージントップクラス」の代わりに「マージンボトムクラス」を作成して前の項目に適用することをお勧めします。
ブートストラップインポートLESSブートストラップファイルを使用している場合は、比例したブートストラップテーマスペースを使用してマージンボトムクラスを定義します。
.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);}
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}
これらのクラスをブートストラップスタイルシートに追加しました
.voffset { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
例
<div class="container">
<div class="row voffset2">
<div class="col-lg-12">
<p>
Vertically offset text.
</p>
</div>
</div>
</div>
これらのクラスを使用して、上の余白を変更します。
.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }
上の要素から2emの間隔を空けるために要素が必要な場合は、次のように使用します。
<div class="row margin-top-20">Something here</div>
あなたがピクセルを好むなら、それをあなたのやり方にするためにemをpxに変えてください。
ブートストラップ4には次のクラスを使用できます。
mt-0mt-1mt-2mt-3mt-4 ...
ブートストラップ4アルファ、マージントップの場合：短縮CSSクラス名mt-1、mt-2（mt-lg-5、mt-sm-2）は下、右、左、および自動クラスml-も同じです。自動
<div class="mt-lg-1" ...>
Unitsは、variables.scss内の1から5：までです。これは、mt-1を設定した場合、マージントップが.25remになることを意味します。
$spacers: (
0: (
x: 0,
y: 0
),
1: (
x: ($spacer-x * .25),
y: ($spacer-y * .25)
),
2: (
x: ($spacer-x * .5),
y: ($spacer-y * .5)
),
3: (
x: $spacer-x,
y: $spacer-y
),
4: (
x: ($spacer-x * 1.5),
y: ($spacer-y * 1.5)
),
5: (
x: ($spacer-x * 3),
y: ($spacer-y * 3)
)
) !default;
もっと読む
https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
このクラスに.cssファイルを追加します。
.row {
margin-left: -20px;
*zoom: 1;
margin-top: 50px;
}
あるいは新しいクラスを作ってそれを要素に追加する
.rowSpecificFormName td {
margin-top: 50px;
}
Bootstrap 4 alpha +ではこれを使うことができます
class margin-bottom-5
クラスは次の形式で命名されています。{property}-{sides}-{size}
1ページだけを変更したい場合は、次のスタイルルールを追加してください。
#myCustomDivID .row {
margin-top:20px;
}
just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
.small-top
{
margin-top: 25px;
}
</style>
<div class="row small-top">
<div class="col-md-12">
</div>
</div>
ブートストラップ3
CSS（余白なし、余白なし）：
.row.row-Gutter {
margin-bottom: -15px;
overflow: hidden;
}
.row.row-Gutter > *[class^="col"] {
margin-bottom: 15px;
}
CSS（等マージン、15px/2）：
.row.row-margins {
padding-top: 7px; /* or margin-top: 7px; */
padding-bottom: 7px; /* or margin-bottom: 7px; */
}
.row.row-margins > *[class^="col"] {
margin-top: 8px;
margin-bottom: 8px;
}
使用法：
<div class="row row-Gutter">
<div class="col col-sm-9">first</div>
<div class="col col-sm-3">second</div>
<div class="col col-sm-12">third</div>
</div>
（SASSまたはLESS 15pxではブートストラップからの変数になる可能性があります）
このコードを追加することができます：
[class*="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
}
BootStrap 3.3.7を使用している場合は、NPM経由でオープンソースライブラリのbootstrap-spacerを使用できます。
npm install bootstrap-spacer
あるいは、githubページにアクセスすることもできます。
https://github.com/chigozieorunta/bootstrap-spacer
これが.row-spacerクラスを使用して行を空白にする方法の例です。
<div class="row row-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
<div class="row row-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
列の間にスペースが必要な場合は、.row-col-spacerクラスを追加することもできます。
<div class="row row-col-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
また、さまざまな.row-spacerクラスと.row-col-spacerクラスを組み合わせることもできます。
<div class="row row-spacer row-col-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
単にスペースとテキストの位置合わせにbs3-upgradeヘルパーを使用するだけです。
<div class="row row-padding">
簡単なコード