1

私が達成したいことは次のとおりです。

http://i.imgur.com/CPb8vAu.png

これまでのところ、次のようになっています (下の余白は問題ではありません。私は、下の余白を小さくする必要があると判断しました)。

http://i.imgur.com/2SKqx0P.png

残念ながら、ガターのサイズは、画像の灰色の部分としてマークされているパディングに基づいています。各パーツのサイズを同じ 15 px にしたいと思います。

私が参照しているコードの部分は次のとおりです (groups-margin が各ボタンの下マージンを設定する場所):

<div class="row">
                <div class="col-sm-6 groups-margin">
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 1 <span class="group-stations-count">Stacje: 3</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 2 <span class="group-stations-count">Stacje: 1</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 3 <span class="group-stations-count">Stacje: 3</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 4 <span class="group-stations-count">Stacje: 6</span></a>
                </div>
                <div class="col-sm-6 groups-margin">
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 5 <span class="group-stations-count">Stacje: 4</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 6 <span class="group-stations-count">Stacje: 6</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 7 <span class="group-stations-count">Stacje: 7</span></a>
                    <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 8 <span class="group-stations-count">Stacje: 2</span></a>
                </div>
            </div>
4

3 に答える 3

0

col-sm-6div でラップして、次の.input-rowように言います。

<div class="row">
    <div class="input-row">
                <div class="col-sm-6 groups-margin">
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 1 <span class="group-stations-count">Stacje: 3</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 2 <span class="group-stations-count">Stacje: 1</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 3 <span class="group-stations-count">Stacje: 3</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 4 <span class="group-stations-count">Stacje: 6</span></a>
                </div>
                <div class="col-sm-6 groups-margin">
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 5 <span class="group-stations-count">Stacje: 4</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 6 <span class="group-stations-count">Stacje: 6</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 7 <span class="group-stations-count">Stacje: 7</span></a>
                        <a class="btn btn-primary btn-large btn-block outline" href="#">Grupa 8 <span class="group-stations-count">Stacje: 2</span></a>
                </div>
    </div>
</div>

col-sm-を使用しているため、これらのプロパティを次のようにメディア クエリ内に追加します。

@media (min-width: 768px){
    .input-row .col-sm-6:first-child{padding-right:7.5px;}
    .input-row .col-sm-6:last-child{padding-left:7.5px;}
}

すべての溝 (左、右、中央は 15px になります)

上記のコードを使用した jsfiddle は次のとおりです: http://jsfiddle.net/AndrewL32/65sf2f66/47/

于 2015-09-14T16:56:20.920 に答える
0

そのセクションだけにガター サイズを大きくしたい場合は、そのためのクラスを作成できます。

.btn .gutter{
   margin-bottom: 5px;
}

クラスでガターを追加するだけです

    <a class="btn btn-primary btn-md gutter">some button</a>
于 2015-09-14T16:59:29.210 に答える