Подтвердить что ты не робот

Twitter Bootstrap 3: Малый смещение/маржа

Я использую twitter bootstrap 3. То, что я хочу, - это поле между двумя div, которое меньше размера сетки (поэтому col-md-offset- * не работает для этого).

<div id="content-row" class="row">
    <div class="col-md-offset-2 col-md-2 content">
        some content
    </div>
    <div id="content" class="col-md-offset-1 col-md-5 content">
        some other content
    </div>
</div>

Мне было интересно, что это за твиттер-бутстрап? Разумеется, можно было бы просто определить поля, но это сломало бы расположение строк/столбцов бутстрапа twitter, поэтому я чувствую, что должно быть лучшее решение.

Ответ 1

По умолчанию каждый столбец имеет прописку 15px с обеих сторон. Это построение желоба 15x2 = 30 пикселей. Вы сделаете видимым желоб, добавив цвет фона в ваш контент или столбцы. Чтобы сделать пространство меньше, чем col-md-offset-1, вы можете использовать вложенность. Это создаст пространство col-md-offset-1/2. Для другого решения вы можете использовать желоб. Причина того, что желоба построена путем заполнения, вы можете манипулировать пространством (дополнением), не разбивая сетку.

См. примеры ниже. Я добавляю боковую панель к вашему коду, чтобы сделать видимым сетку, не разбитую.

<div class="container">     

Your solution:<br>

<div id="content-row" class="row">
    <div class="col-md-offset-2 col-md-2 content" style="background-color:green">
        some content
    </div>
    <div id="content" class="col-md-offset-1 col-md-5 content" style="background-color:orange">
        some other content
    </div>
    <div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>

half size with nesting:<br>

<div id="content-row" class="row">
    <div class="col-md-offset-2 col-md-2 content" style="background-color:green">
        some content
    </div>
    <div id="content" class="col-md-6 content" style="background-color:orange">
        <div class="row">
            <div id="content" class="col-md-offset-1 col-md-11 content content" style="background-color:pink">
                some other content
            </div>  
        </div>  
    </div>
    <div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>

space of the gutter:<br>

<div id="content-row" class="row">
    <div class="col-md-offset-2 col-md-2 content" style="background-color:green">
        some content
    </div>
    <div id="content" class="col-md-6 content" style="background-color:orange">
        <div style="background-color:red;">some other content</div>
    </div>
    <div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>

Manipulated space of the gutter, using padding won't break the grid:<br>

<div id="content-row" class="row">
    <div class="col-md-offset-2 col-md-2 content" style="background-color:green">
        some content
    </div>
    <div id="content" class="col-md-6 content" style="background-color:orange; padding-left:1px; padding-right:0">
        <div style="background-color:red;">some other content</div>
    </div>
    <div id="sidbar" class="col-md-2" style="background-color:blue;">sidebar</div>
</div>

Вы можете скомпилировать свою собственную сетку и выбрать водосточный желоб, который вам подходит: http://getbootstrap.com/customize/