回答:
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>
応答性を高めるために、たとえば：Dのmargin-top:7%代わりに追加できます5px。
.top-buffer { margin-top:20px; }違うの.top30 { margin-top:30px; }？まあ、どの開発者の観点からも：それは同じです。ユースケースに合わせて調整することは、ここでは考慮されません。特に、OPが自分の質問に答えた場合。
ブートストラップの行を分離する必要がある場合は、簡単に使用できます .form-group。これにより、行の下部に15pxのマージンが追加されます。
あなたのケースでは、マージントップを取得するには、このクラスを前の.row要素に追加できます
<div class="row form-group">
/* From bootstrap.css */
.form-group {
margin-bottom: 15px;
}組み込みの間隔クラスを使用できます
<div class="row mt-3"></div>クラス名の「t」は、「上」側にのみ適用され、下、左、右に同様のクラスがあります。数値はスペースサイズを定義します。
form-groupまだ存在しますが、マージン/パディングのための特別なクラスが追加されました。これは、仕事を行うことができ、より多くのオプションがあります。
mt-3使用していて、あまり使用されていませんform-group
Bootstrap 4の場合、次を使用して間隔を適用する必要があります
簡略ユーティリティクラス
次の形式で：
{プロパティ} {サイド}-{サイズ}
どこプロパティは次のいずれかです。
どこにのいずれかです。
ここで、サイズは次のいずれかです。
したがって、次のいずれかを実行する必要があります。
<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
そのため、「マージントップクラス」ではなく「マージンボトムクラス」を作成し、前のアイテムに適用することをお勧めします。
Bootstrapを使用してLESS Bootstrapファイルをインポートしている場合は、比例したBootstrapテーマスペースを使用してmargin-bottomクラスを定義してください。
.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に変更してください。
<div class="row margin-top-20">以上のメリットは何<div class"row" style="margin-top: 2.0em">ですか？
ブートストラップ4には次のクラスを使用できます。
mt-0
mt-1
mt-2
mt-3
mt-4
...
マージン4のブートストラップ4アルファ：短縮CSSクラス名mt-1、mt-2（mt-lg-5、mt-sm-2）は下、右、左で同じで、自動クラスml-オート
<div class="mt-lg-1" ...>単位は1toから5：です。variables.scssでは、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;
}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では、ブートストラップからの変数である可能性があります）
<div class="row row-padding">簡単なコード
bs3-upgradeスペースとテキストの配置にこのヘルパーを使用するだけです...
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>