web-dev-qa-db-ja.com

Twitterに簡単なスペーサーを追加するbootstrap

私はTwitterブートストラップをLESSとRailsとともに使用しています。

グリッド行の間に表示されるCSSに簡単なスペーサーを追加して、物事を少しうまく配置したいと思います。 bootstrapで何も見つからなかったので、マージン上部が定義されたスペーサーdivを追加できると考えました。

私はbootstrapオーバーライドファイルで次のコードを取りました：

 .spacer {  margin-top: 40px; }

しかし、すべての余白は、グリッドの間ではなく、ページの上部に集まっているようです。私はどこかに欠けている位置属性だと確信しています。助けてください。

これを達成するためのより良い方法について、またはt-bootstrapが私が見逃したものをすでに持っているなら、私は他の提案を受け入れます。

ありがとう！

cssruby-on-rails-3twitter-bootstrap
37
Adam

.row divのそれぞれにクラスを追加して、それらの間にスペースを追加できます。

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

その後、次のように使用できます。

<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>
80
Andres Ilich

Bootstrap 4では、mt-5、mb-5、my-5、mx-5（上下両方にy、左右両方にx）。

彼らのサイトによると：

クラスは、xsの場合は{property} {sides}-{size}、sm、md、lg、xlの場合は{property} {sides}-{breakpoint}-{size}の形式を使用して名前が付けられます。

リンク： https://getbootstrap.com/docs/4.0/utilities/spacing/

9
Marek Naskret

私のアプローチ。トリッキーですが、私にはうまくいきます

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