web-dev-qa-db-ja.com

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

TwitterのBootstrapを使用して垂直空白を追加する最善の方法は何ですか？

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

twitter-bootstrapwhitespacevertical-alignmenttwitter-bootstrap-2
153
Ryan

ブートストラップ4には スペースユーティリティ があります。

引用 使用された表記法のためのドキュメンテーション ：

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

クラスは、xsの場合は{property}{sides}-{size}、smの場合は{property}{sides}-{breakpoint}-{size}、md、lg、およびxlの形式で名前が付けられます。

propertyは次のいずれかです。

  • m - marginを設定するクラス用
  • p - paddingを設定するクラス用

sideは次のいずれかです。

  • 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の両方を設定するクラス用
  • 空白 - 要素の4つの側面すべてにmarginまたはpaddingを設定するクラスの場合

sizeは次のいずれかです。

  • 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クラスを使用します。

30
vlp

V2では、それほど多くの垂直方向のスペースのための組み込みのものは何もないので、あなたはカスタムクラスに固執したいでしょう。高さがこれより小さい場合は、通常、ボタンの周りに<div class="control-group">をスローするだけです。

51
jmdeldin

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

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

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

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

通常のフォーム要素の高さだけスペースが追加されます。

フォーム上の約1行はおよそ50px（私が調べたばかりの要素では47px）です。これは、左側の2colにラベル、右側の10colに入力された横型のフォームです。だからあなたのピクセルは変わるかもしれません。

私のものは基本的に50pxなので、マージンやパディングなしで高さ50pxのスペーサーを作成します。

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

私はこれが古いことを知っています、しかし私は同じことを捜してここに来ました、私はBootstrapがこれらの状況のた​​めに非常に役に立つヘルプブロックを持っているとわかりました：

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

バージョン3では、これをきちんと達成するための「ブートストラップ」方法はないようです。

panel、well、およびform-groupは、すべて垂直方向のスペースを提供します。

もっと正式な特定の垂直間隔解決策は、明らかに、ブートストラップv4のロードマップにあります。

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

21
ErichBSchulz

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

今までにない高さが必要な分数クラスを作成するだけです。

8
user5593012

私のトリックエレガントではありませんが、うまくいきます。

<p>&nbsp;</p>
7
asiniy

私は<div class="control-group">を使ってみました、そしてそれは私のレイアウトを変えませんでした。縦方向のスペースは追加されませんでした。私のために働いた解決策は次のとおりです。

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

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

4
John Erck

<br/>を使うだけです。私は自分自身がこの質問に対する答えを探しているのに気づき、それからユーザーのJayKilleenがコメントで提案したように単純な改行を使うことを考えないのではちょっとばかげた感じがしました。

4
adjenks

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

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

その後

<div class="divider"></div>
3
Sanjeev
<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

1
Den