シンプルなスペーサーをtwitterブートストラップに追加する

Question

私はtwitter-bootstrapをLESSとRailsと共に使用しています。

グリッドの行間に表示されるシンプルなスペーサーをCSSに追加して、スペースを少しずつ広げたいと思います。私はブートストラップで何も見つけられませんでした。それで、私はマージントップを定義したスペーサーdivを追加することができると考えました。

私は、ブートストラップoverrideファイルに次のコードをstook：

.spacer { margin-top: 40px; } 

が、すべての余白は、ページの上部にあるとないグリッド間一緒に束に思えます。私はその位置属性がどこかで逃していると確信しています - 助けてください。

これを達成するために、またはt-bootstrapにすでに私が見逃してしまったことがある場合は、他の提案があります。

ありがとうございます！

Answer 1

あなたがそうのようにそれらの間にいくつかのスペースを追加するために、あなたの.row div要素のそれぞれにクラスを追加することができます：ブートストラップ4では

<div class="row spacer"> 
    <div class="span4">...</div> 
    <div class="span4">...</div> 
    <div class="span4">...</div> 
</div> 

<div class="row spacer"> 
    <div class="span4">...</div> 
    <div class="span4">...</div> 
    <div class="span4">...</div> 
</div> 

Answer 2

：

.spacer { 
    margin-top: 40px; /* define margin as you see fit */ 
} 

をあなたはそのようにようにそれを使用することができます（まだアルファですが）mt-5、mb-5のようなクラスを使用できます。 - {サイズ} XSおよび{プロパティ} {辺} - {ブレークポイント} - {サイズ}の

クラスは{プロパティ} {辺}の形式を使用して命名されます自分のサイトによれば

sm、md、lg、およびxl。

リンク：https://v4-alpha.getbootstrap.com/utilities/spacing/

Answer 3

私のアプローチ。厄介ですが、私にとってはうまくいく

<p>&nbsp;</p>