Ответ 1

Да, не делай этого. Удаление box-sizing: border-box приведет к разрушению вашей сетки. См. Также: Почему Bootstrap 3 переключился на размер окна: border-box?

Пример, показывающий, что происходит:

<div class="container" style="background-color:lightblue;"> 
    <div class="row" style="background-color:red;"> 
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
    </div>
</div>
<br>
<div class="container nonborderbox" style="background-color:lightblue;">    
    <div class="row" style="background-color:red;"> 
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
    </div>
</div>

С

.nonborderbox *
{
-webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;
} 

Вышеуказанное приведет к:

С box-sizing: border-box конструкция желоба по отступу будет отсутствовать из расчета ширины столбца.

Попытайтесь понять сетку Bootstrap и box-sizing: border-box и выясните, почему это испортит ваш макет. Устраните эти проблемы или подумайте, не используйте Bootstrap вообще для своего проекта.

Ответ 2

У меня такая же проблема, и bootstrap 3 уничтожает мои существующие макеты и сторонние виджеты. Вот что я пробовал в порядке возрастания сложности и стабильности.

Самый простой способ

Безопасно, только если вы не используете другие компоненты начальной загрузки

Добавьте следующий css после загрузки bootstrap css:

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

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

Это будет использовать размер border-box только для элементов в сетке. Это не будет работать, если у вас есть пользовательские виджеты в сетке, поскольку они все равно будут иметь border-box.

Более целенаправленный подход

Безопасно, только если вы не используете другие компоненты начальной загрузки

В качестве альтернативы вы можете добавить собственный класс col для каждого столбца div, у которого уже есть col-*-*, как показано ниже:

<div class="container">
    <div class="row">
        <div class="col-md-3 col">Grid still works</div>
        <div class="col-md-9 col">:)</div>
    </div>
</div>

Вместо этого используйте следующий css:

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

.container .row .col,
.container .row .col:before,
.container .row .col:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Это отлично работает, если вам нужно использовать только системную систему bootstrap в вашем проекте. Однако, если вы намерены использовать другие компоненты начальной загрузки, я не рекомендую этот подход, поскольку другие компоненты бутстрапа будут зависеть от установленного border-box.

Черри-выберите каждый содержащий элемент для исправления

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

.your-custom-widget-class *,
.your-custom-widget-class *:before,
.your-custom-widget-class *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

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

Ответ 3

Добавьте это в ваш mixin или переменные меньше и убедитесь, что он загружается после scaffolding.less Он сбрасывает размер блока bs3 и снова применяет его к конкретным элементам и всем элементам, требующим BS3. Я обнаружил, что большинство беспорядков, созданных по умолчанию для размера BS3, это когда он применяется к

a,ul,li

Магия

* {
  .box-sizing(content-box);
}
form,
div,
img,
table,
th,
tr,
td,
p,
article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
main, 
nav, 
section, 
summary,
audio,
canvas,
progress,
video,
[class^="container-"], 
[class^="container-"] *,
[class^="col-"], 
[class^="col-"] *,
[class^="form-"],
[class^="form-"] *,
[class^="bg-"],
[class^="bg-"] *,
[class^="navbar"],
[class^="navbar"] *,
[class^="nav"],
[class^="nav"] *,
[class^="row"],
[class^="row"] * {
  .box-sizing(border-box);
}

Ответ 4

Я использовал комбинацию из вышеперечисленных решений, чтобы соответствовать моей потребности (Я использовал только сетку, все остальное уже было)

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


[class^="container-"], 
[class^="container-"] *,
[class^="col-"], 
[class^="col-"] *,
[class^="row"],
[class^="row"] * {
  box-sizing:border-box;
}

В сетке было слишком много полей и отступов  поэтому я заменил все

padding-right:15px;
padding-left:15px;
margin-left=-15px;
margin-right=-15px;

to (я прокомментировал поля)

.row {
/*  margin-left: -15px;
margin-right: -15px;*/
}

и

.col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
}