引导3 - 降低阴沟大小

虽然到目前为止，它看起来像这样（下边距都没有问题，我决定，他们应该是更小的）：

不幸的是，沟槽的尺寸是基于被标记为在图像向上灰色部分填充。我希望每个部分都有相同的尺寸：15像素。

的代码，我这里指的是部分（其中集团利润设定每个按键下边距）：

<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>

来源

2015-09-14 Jakub

请在您的问题中发布您的代码。 – j08691

请包含您用于生成输出的代码。 –

奥赫，当然，我已经完全忘记了最重要的部分... – Jakub

有一个div包装你col-sm-6，说.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;} 
}

个

现在所有排水沟（左，右和中间的将是15像素）

下面是上述代码的的jsfiddle：http://jsfiddle.net/AndrewL32/65sf2f66/47/

来源

2015-09-14 16:56:20

谢谢一堆！这解决了我的问题:) – Jakub

很高兴我可以帮助Jakub :) –

如果你想增加排水沟大小只有部分，你可以做一个上课。

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

，你可以只与类

<a class="btn btn-primary btn-md gutter">some button</a>

来源

2015-09-14 16:59:29 Gokigooooks

我喜欢创造更具体的行类，留下引导的完整补充排水沟。所以我可能会有这样的事情：

.row-half-gutter { 
    margin-right: (@grid-gutter-width/2) * -1; 
    margin-left: (@grid-gutter-width/2) * -1; 

    > [class*="col-"] { 
    padding-right: (@grid-gutter-width/4); 
    padding-left: (@grid-gutter-width/4); 
    } 
} 

.row-no-gutter { 
    margin-right: 0; 
    margin-left: 0; 

    > [class*="col-"] { 
    padding-right: 0; 
    padding-left: 0; 
    } 
}

来源

2015-09-14 17:03:57

引导3 - 降低阴沟大小

回答

相关问题