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>это как?

Источник

2 ответа

Решение

Если вы посмотрите на собственную демо - версию контейнера-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 разрешить добавление новой левой границы. Поскольку это правило появляется позже в исходном порядке, оно переопределяет любые предыдущие или внешние объявления.

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

Источник

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

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

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

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

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

МЕНЬШЕ:

.box-sizing(border-box);

Sass:

@include box-sizing(border-box);
Источник
Другие вопросы по тегам