Twitterのブートストラップを使用して垂直方向の空白を追加する最良の方法は何ですか？
たとえば、ランディングページを作成していて、特定のボタンの上下に少し（100px）の空白を入れたいとします。明らかに、その特定のボタンに対して特定のクラスを作成できます。しかし、Bootstrapには、垂直方向の空白スペースを追加するDRYの方法が必要だと思います。
質問する
213935 次
13 に答える
52
v2には、それほど多くの垂直方向のスペースが組み込まれていないため、カスタムクラスを使用する必要があります。高さが小さい場合は、通常<div class="control-group">、ボタンの周りに投げます。
于 2012-09-05T02:07:28.760 に答える
50
ラッピングは機能しますが、スペースが必要な場合は、次のようにします。
<div class="col-xs-12" style="height:50px;"></div>
于 2015-06-03T23:53:20.703 に答える
42
Bootstrap 4/5には、スペーシングユーティリティ（BS4、BS5）があります。
ドキュメントからの抜粋：
xsからまでのすべてのブレークポイントに適用される間隔ユーティリティにxlは、ブレークポイントの省略形はありません。これは、これらのクラスが上から適用さmin-width: 0れ、メディアクエリにバインドされていないためです。ただし、残りのブレークポイントには、ブレークポイントの省略形が含まれています。クラスには、、、、、およびの形式を使用して 名前が
{property}{sides}-{size}付けられます。xs{property}{sides}-{breakpoint}-{size}smmdlgxlプロパティが次のいずれかである場合：
m-設定するクラスの場合marginp-設定するクラスの場合padding側面が1つである場合（ BS4とBS5の違いに注意してください）：
tmargin-top-またはを設定するクラスの場合padding-topbmargin-bottom-またはを設定するクラスの場合padding-bottomlmargin-left-または（ブートストラップ4）を設定するクラスの場合padding-leftsmargin-left-または（ブートストラップ5）を設定するクラスの場合padding-leftrmargin-right-または（ブートストラップ4）を設定するクラスの場合padding-rightemargin-right-または（ブートストラップ5）を設定するクラスの場合padding-rightx*-left-との両方を設定するクラスの場合*-righty*-top-との両方を設定するクラスの場合*-bottom- 空白-要素の4辺すべてに
marginまたはを設定するクラスの場合paddingサイズは次のいずれかです。
0-に設定してマージンまたはパディングを削除するクラスの場合01-（デフォルト）marginまたはpaddingをに設定するクラスの場合$spacer * .252-（デフォルト）marginまたはpaddingをに設定するクラスの場合$spacer * .53-（デフォルト）marginまたはpaddingをに設定するクラスの場合$spacer4-（デフォルト）marginまたはpaddingをに設定するクラスの場合$spacer * 1.55-（デフォルト）marginまたはpaddingをに設定するクラスの場合$spacer * 3
したがって、要素の上下に垂直方向のスペースを追加するには、my-5クラスを使用します。
于 2017-01-26T21:21:36.240 に答える
36
ここで古い墓を掘ってすみませんが、なぜこれをしないのですか？
<div class="form-group">
</div>
通常のフォーム要素の高さのスペースが追加されます。
フォームの約1行は約50px（先ほど調べた要素では47px）のようです。これは水平形式で、左側に2列のラベルがあり、右側の10列に入力があります。そのため、ピクセルが異なる場合があります。
私のは基本的に50pxなので、余白やパディングのない高さ50pxのスペーサーを作成します。
.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>
于 2015-08-06T00:27:17.340 に答える
24
私はこれが古いことを知っていますが、私は同じことを探してここに来ました、私はBootstrapがこれらの状況に非常に便利なヘルプブロックを持っていることを発見しました：
<div class="help-block"></div>
于 2015-11-16T18:12:04.853 に答える
21
バージョン3の場合、これを適切に実現するための「ブートストラップ」方法はないようです。
A panel、a、wellおよびform-groupすべては、垂直方向の間隔を提供します。
より正式な特定の垂直間隔ソリューションは、明らかに、ブートストラップv4のロードマップにあります。
https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532
于 2015-02-18T13:30:31.237 に答える
9
さまざまな高さを使用してdivクラスを作成しただけです。
<div class="divider-10"></div>
CSSは次のとおりです。
.divider-10 {
width:100%;
min-height:1px;
margin-top:10px;
margin-bottom:10px;
display:inline-block;
position:relative;
}
必要な高さの仕切りクラスを作成するだけです。
于 2016-11-24T02:04:40.460 に答える
8
私のトリック。エレガントではありませんが、機能します。
<p> </p>
于 2017-02-04T03:17:57.633 に答える
5
私はこれが古く、すでにいくつかの良い解決策が投稿されていることを知っていますが、私のために働いた簡単な解決策は次のCSSです
<style>
.divider{
margin: 0cm 0cm .5cm 0cm;
}
</style>
次に、HTMLにdivを作成します
<div class="divider"></div>
于 2017-03-02T19:52:55.050 に答える
5
を使用するだけ<br/>です。私はここでこの質問に対する答えを探していることに気づき、ユーザーのJayKilleenがコメントで提案したように、単純な改行を使用することを考えなかったのはちょっとばかげていると感じました。
于 2017-08-08T19:14:23.033 に答える
4
使っ<div class="control-group">てみましたが、レイアウトは変わりませんでした。垂直方向のスペースは追加されませんでした。私のために働いた解決策は次のとおりでした：
<ol style="visibility:hidden;"></ol>
それでも十分な垂直方向のスペースが得られない場合は、ネストされた<li> </li>タグを追加することで、段階的にスペースを増やすことができます。
于 2015-01-16T19:12:39.747 に答える
1
<form>
<fieldset class="form-group"><input type="text" class="form-control" placeholder="Input"/></fieldset>
<fieldset class="form-group"><button class="btn btn-primary"/>Button</fieldset>
</form>
http://v4-alpha.getbootstrap.com/components/forms/#form-controls
于 2016-05-13T11:41:44.000 に答える
-3
ドライ以上のものはありません
.btn {
margin-bottom:5px;
}
于 2014-09-18T10:19:39.787 に答える