40

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

グリッド行の間に表示されるCSSに単純なスペーサーを追加して、物事の間隔を少し広げたいと思います。ブートストラップでそれを行うものが見つからなかったので、マージントップが定義されたスペーサーdivを追加するだけでよいと考えました。

ブートストラップオーバーライドファイルで次のコードを取得しました。

 .spacer {  margin-top: 40px; }

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

これを達成するためのより良い方法について、またはt-bootstrapにすでに見逃しているものがある場合は、他の提案を受け入れることができます。

ありがとう！

4

3 に答える 3

83

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

.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>
于 2012-05-21T19:43:02.983 に答える
11

mt-5Bootstrap 4では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/

于 2015-11-20T10:34:09.873 に答える
3

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

<p>&nbsp;</p>
于 2017-02-04T03:16:10.733 に答える