Twitter Bootstrapを使用して垂直方向の空白を追加しますか？

Twitterのブートストラップを使用して垂直方向の空白を追加する最良の方法は何ですか？

たとえば、ランディングページを作成していて、特定のボタンの上下に少し（100px）の空白スペースが必要だとします。明らかに、その特定のボタンに対して特定のクラスを作成することができます。しかし、Bootstrapには縦の空白を追加するDRYの方法が必要だと思います。

ではブートストラップ4があり間隔Utilitesをが。

使用されている表記法のドキュメントの引用：

すべてのブレークポイントに適用される間隔のユーティリティxsにはxl、それらには、ブレークポイントの省略形を持っていません。これは、これらのクラスが上から適用min-width: 0され、メディアクエリにバインドされないためです。ただし、残りのブレークポイントには、ブレークポイントの省略形が含まれています。

クラスは、形式を使用して名前が付けられている{property}{sides}-{size}ためxs と{property}{sides}-{breakpoint}-{size}のためにsm、md、lg、とxl。

どこプロパティは次のいずれかです。

• m -設定したクラス margin
• p -設定したクラス padding

どこの辺は、のいずれかです。

• t-設定margin-topまたはpadding-top
• b-設定margin-bottomまたはpadding-bottom
• l-設定margin-leftまたはpadding-left
• r-設定margin-rightまたはpadding-right
• x-セットの両方のクラスの*-leftと*-right
• y-セットの両方のクラスの*-topと*-bottom
• 空白- 要素のa marginまたはpadding4辺すべてを設定するクラスの場合

ここで、サイズは次のいずれかです。

• 0 -に設定してマージンまたはパディングを削除するクラスの場合 0
• 1-（デフォルト）marginまたはpaddingを設定するクラス$spacer * .25
• 2-（デフォルト）marginまたはpaddingを設定するクラス$spacer * .5
• 3-（デフォルト）marginまたはpaddingを設定するクラス$spacer
• 4-（デフォルト）marginまたはpaddingを設定するクラス$spacer * 1.5
• 5-（デフォルト）marginまたはpaddingを設定するクラス$spacer * 3

したがって、要素の上下に垂直方向のスペースを追加するには、my-5クラスを使用します。

v2では、それほど多くの垂直方向のスペースには何も組み込まれていないため、カスタムクラスを使い続ける必要があります。高さが小さい場合は、通常<div class="control-group">、ボタンの周りを投げるだけです。

ラッピングは機能しますが、スペースだけが必要な場合は、次のようにします。

<div class="col-xs-12" style="height:50px;"></div>

ここで古い墓を掘って申し訳ありませんが、なぜこれをしないのですか？

<div class="form-group">
    &nbsp;
</div>

通常のフォーム要素の高さにスペースを追加します。

フォームの約1行は約50pxです（先ほど調べた要素では47px）。これは、左側の2colにラベルがあり、右側の10colに入力がある、水平形式です。したがって、ピクセルが異なる場合があります。

私の場合は基本的に50pxなので、余白やパディングのない高さ50pxのスペーサーを作成します。

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>

私はこれが古いことを知っていますが、同じことを探してここに来ました。Bootstrapにはヘルプブロックがあり、次のような場合に非常に便利です。

<div class="help-block"></div>

バージョン3の場合、これを適切に実現する「ブートストラップ」方法はないようです。

A panel、a、wellおよびform-groupallは、垂直方向の間隔を提供します。

より正式な特定の垂直間隔ソリューションは、明らかに、ブートストラップv4のロードマップにあります

https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532

私は単にさまざまな高さを使用して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;
}

必要な高さのディバイダークラスを作成するだけです。

私のトリック。エレガントではありませんが、機能します：

<p>&nbsp;</p>

だけを使用してください<br/>。私はここでこの質問への答えを探していて、コメントでユーザーJayKilleenによって提案された単純な改行を使用することを考えていなかったので、ばかげたことを感じました。

私はこれが古いことを知っていて、すでにいくつかの良い解決策が投稿されていますが、私にとってうまくいった簡単な解決策は次のCSSです

<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>

そしてあなたのhtmlにdivを作成します

<div class="divider"></div>

使っ<div class="control-group">てみましたがレイアウトは変わりませんでした。垂直方向のスペースは追加されませんでした。私のために働いた解決策は：

<ol style="visibility:hidden;"></ol>

それでも十分な垂直方向のスペースが得られない場合は、ネストされた<li>&nbsp;</li>タグを追加することで、徐々にスペースを増やすことができます。

<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

DRY以外に何もありません

.btn {
    margin-bottom:5px;
}