Twitter Bootstrap - границы

Я только начал использовать Twitter Bootstrap, и у меня есть вопрос о том, как лучше всего добавить границу к родительскому элементу?

например, если у меня есть

 <div class="main-area span12">
    <div class="row">
       <div class="span9">
            //Maybe some description text
       </div>
       <div class="span3">
            //Maybe a button or something
       </div>
    </div>
 </div>

Если я применил такую границу:

.main-area {
    border: 1px solid #ccc;
}

Система сетки сломается и ударит span3 до следующей строки из-за добавленной ширины границы...... Есть ли хороший способ добавить к родителям такие вещи, как границы или отступы <div> как это?

Ответ 1

Если вы посмотрите на свою собственную демонстрацию container-app.html Twitter на GitHub, вы получите некоторые идеи по использованию границ с их сетью.

Например, здесь извлеченная часть строительных блоков для их 16-колоночной сетки шириной 940 пикселей:

.row {
    zoom: 1;
    margin-left: -20px;
}

.row > [class*="span"] {
    display: inline;
    float: left;
    margin-left: 20px;
}

.span4 {
    width: 220px;
}

Чтобы разрешить границы для определенных элементов, они добавили внедренный CSS на страницу, которая уменьшает совпадающие классы на достаточную сумму для учета границ (ов).

Например, чтобы разрешить левую рамку на боковой панели, они добавили этот CSS в <head> после основного <link href="../bootstrap.css" rel="stylesheet">.

.content .span4 {
    margin-left: 0;
    padding-left: 19px;
    border-left: 1px solid #eee;
}

Вы увидите, что они уменьшили padding-left на 1px, чтобы добавить новую левую границу. Поскольку это правило появляется позже в порядке источника, оно отменяет любые предыдущие или внешние объявления.

Я бы сказал, что это не самый надежный или элегантный подход, но он иллюстрирует самый простой пример.

Ответ 2

Другое решение, с которым я столкнулся сегодня вечером, который работал для моих нужд, заключался в добавлении атрибутов box-sizing:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Эти атрибуты заставляют границу быть частью ширины и высоты окна коробки и также исправляют проблему.

В соответствии с caniuse.com" размер окна, box-sizing поддерживается в IE8 +.

Если вы используете LESS или Sass, для этого есть Mix для Bootstrap.

LESS:

.box-sizing(border-box);

Sass:

@include box-sizing(border-box);