web-dev-qa-db-ja.com

（ブートストラップ）ラップするときに要素間に垂直方向のスペースを少し保持しますか？

Bootstrapを使用して、要素の束（たとえばbuttons）を行に入れてウィンドウを縮小すると、要素が折り返されます。

ただし、ウィンドウの幅が十分に広く、すべての要素が隣接している場合、要素間に水平方向のスペースがありますが、垂直方向にすべての要素がくっつき、空のスペースがゼロピクセルになります。

ライブの例 （出力ウィンドウを狭くしたり広げたりして効果を確認します）

スクリーンショットの例：
1。 十分に広く、ボタン間のスペースに注意してください
2。 折り返し、互いの上に積み重ねられたボタンの間にスペースがないことに注意してください

私はいくつかのカスタムCSSをいじって、垂直マージンまたはその他を追加することができたと思いますが、可能な限り互換性と標準を維持するために、これを修正するより良いまたはよりネイティブな方法がありますかBootstrapレイアウト？

htmlcsstwitter-bootstrapbuttonwhitespace
20
RocketNuts

ここで行われるのは、ボタンがインラインブロックとして表示され、デフォルトではそのような要素には最初から空白や余白がないことです。これを回避するには、以下の方法を使用できます。

私がしたことは、ボタンの親要素にクラスを追加し、スタイルをクラス「btn」に継承することです。

html

<div class='container'>
    <div class='row'>
        <div class='col-xs-12 button-wrapper'>
            <button class='btn btn-primary'>Lorem ipsum dolor sit amet</button>
            <button class='btn btn-info'>consectetur adipiscing elit</button>
            <button class='btn btn-success'>sed do eiusmod tempor incididunt</button>
        </div>
    </div>
</div>

css

.button-wrapper .btn {
    margin-bottom:5px;
}

デモ

24
Shanaka

Bootstrapでは、次のように上下の余白を追加するためのクラスを常に作成します。

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

.bottom5 { margin-bottom:5px; }
.bottom7 { margin-bottom:7px; }
.bottom10 { margin-bottom:10px; }
.bottom15 { margin-bottom:15px; }
.bottom17 { margin-bottom:17px; }
.bottom30 { margin-bottom:30px; }

覚えやすく、この問題を簡単に修正できます。 main.cssファイルに追加するだけです。

12
Millsionaire

次のようにしてください：デモ

CSS：

 @media (max-width: 779px) {
     .btn{
         margin-bottom:10px;
 }
8
G.L.P

デモ ButtonにMargin-bottom cssを使用します。

    .btn{margin-bottom:10px;}

Uは、このcssを新しい親クラス名で記述して、上記のcssが他のページに影響するのを回避できます。

3
Ezhil - UI Developer

以下のexampleを確認してください：

コード：

.btn {
    margin: 10px auto;
}
<div class='container'>
        <div class='row'>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-primary">Lorem ipsum dolor sit amet</button>
        </div>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-info">consectetur adipiscing elit</button>
        </div>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-success">sed do eiusmod tempor incididunt</button>
        </div>        
        
        </div>
</div>

例

3
biplob

私はこの方法を使用しています：いくつかの垂直スペースを持つdivを追加します：

<div class="vspace1em"></div>

css：

    div.vspace1em {
        clear: both;
        height: 1em;
    }
1
Roland