Twitter Bootstrap 3: небольшое смещение /маржа

Я использую загрузчик Twitter 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-bootstrap? Конечно, можно просто определить поля, но это нарушит макет строки /столбца загрузчика Twitter, поэтому я чувствую, что должно быть лучшее решение.

10 голосов | спросил nanoquack 15 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSun, 15 Sep 2013 00:54:57 +0400 2013, 00:54:57

1 ответ


0

По умолчанию каждый столбец имеет отступ 15 пикселей с обеих сторон. Это конструкция желоба 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/настроить /

ответил Bass Jobsen 15 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSun, 15 Sep 2013 23:58:33 +0400 2013, 23:58:33

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132