Twitter Bootstrap - границы

68

Я только начал использовать 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 ответа

57
Лучший ответ

Если вы посмотрите на свою собственную демонстрацию 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 на страницу, которая уменьшает совпадающие классы на достаточную сумму для учета границ (ов).

Изображение 2433

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

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

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

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

Поделиться
  • 0
    Только то, что мне было нужно, спасибо!
  • 0
    офигенно спасибо!
Показать ещё 2 комментария
48

Другое решение, с которым я столкнулся сегодня вечером, который работал для моих нужд, заключался в добавлении атрибутов 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);
Поделиться
  • 9
    Если вы используете Twitter Bootstrap с их реализацией LESS css, на самом деле есть дополнение. .box-sizing(border-box);
  • 1
    В каких версиях IE это работает?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню