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

2 68
css twitter-bootstrap

2 ответа:

если вы посмотрите на свой Твиттер контейнер-приложение.HTML-код демо на GitHub, вы получите некоторые идеи по использованию границ с их сеткой.

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

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

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

.span4 {
    width: 220px;
}

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

Screenshot of Example Page

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

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

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

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

57

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

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

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

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

если вы используете меньше или Sass есть загрузочный микшер для этот.

минус:

.box-sizing(border-box);

Сасс:

@include box-sizing(border-box);
46