2015-09-14 2 views
1

То, что я хочу достичь, это:Bootstrap 3 - уменьшение размеров водосточной

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

Хотя до сих пор это выглядит следующим образом (нижние поля не вопрос, я решил, что они должны быть меньше):

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

к сожалению, размер водосточного желоба основан на дополнениях, помеченные как серая часть в изображении вверх. Я хотел бы, чтобы каждая часть имела одинаковый размер: 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> 
+0

Отправьте свой код на свой вопрос, пожалуйста. – j08691

+0

Пожалуйста, укажите код, который вы использовали для генерации вывода. –

+0

Auch, конечно, я полностью забыл о самой важной части ... – Jakub

ответ

0

Оберните col-sm-6 с DIV, скажем .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/

+0

Спасибо! Это решило мою проблему:) – Jakub

+0

Рад, что я могу помочь Якубу :) –

0

Если вы хотите увеличить размер водосточного желоба только ту часть, вы можете сделать класс для него.

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

и вы можете просто добавить переплета с использованием классов

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

Я хотел бы создать более конкретные классы строк, оставляя Bootstrap нетронутыми. Поэтому у меня может быть что-то вроде этого:

.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; 
    } 
}