Использование box-sizing: border-box с Twitter Bootstrap 2.x, можем ли мы сделать это легко, не нарушая все?

В моих последних проектах я использовал модель "box box box". У этого есть много преимуществ, которые я не буду здесь объяснять. Но вы можете прочитать об этом здесь: Граница в css-трюках

Теперь я начинаю большой проект, и мы решили, что twitter bootstrap будет хорошим решением для наших нужд. Мне было интересно, возможно ли это сделать "пограничным", не нарушая все. Кто-нибудь пробовал это и каковы будут/будут последствия? Слишком много настроек? реальное улучшение?

Ответы

Ответ 1

Да.

Здесь mixin, который вы можете использовать в Bootstrap. Он автоматически добавит все префиксы поставщика.

*, *:before, *:after {
    .box-sizing(border-box);
}

input {
    .box-sizing(content-box);
}

Входы по-прежнему нуждаются в содержимом, иначе они будут слишком маленькими.

Ответ 2

Он очень упрощает работу с жидкокристаллическими/реагирующими конструкциями: есть некоторые сложные макеты и случаи, когда требуется согласованное расстояние, которое было бы почти невозможно без использования border-box.

Я недавно использовал это (FTW!):

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

на довольно большом сайте, и нашел, что он действительно решил много проблем. Если вам нужна поддержка IE7, мой подход состоял в том, чтобы обслуживать этот браузер версии с фиксированной шириной сайта и использовать этот polyfill только там, где это необходимо. *

Я действительно не нашел недостатков - это облегчение, чтобы указать два столбца шириной 50%, добавить padding и знать, что он будет работать. В тех местах, где вы можете положиться на стандартный box-model, вы всегда можете вернуться к нему для определенных элементов.

Бутстрап специфические

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

Основная системная система, встроенная в Bootstrap 2.x, использует float и margin, поэтому изменение box-model не повлияет на это (это просто даст вам возможность добавить padding непосредственно в столбцы).

Bootstrap 3 переходит на мобильный подход (и полностью отключает поддержку IE7). Это включает в себя:

[A] Новая система с одной сеткой (по-прежнему использует .row) использует процентные ширины, отступы и box-sizing: border-box вместо ширины и полей пикселей.

Таким образом, они явно верят в преимущества такого подхода.

* Я думал, что я уже полагаюсь на HTML-прокладку в Modernizr, так что браузер уже полагается на JS для его компоновки. С помощью SASS для хранения ширины переменных это работает довольно гладко. Тем не менее, если использование для старого IE выше для любого конкретного проекта, этот подход становится менее подходящим.