CSS twitter bootstrap box-sizing 毁了我的布局

twitter bootstrap box-sizing ruined my layout

提问by Ulises Colen

my layout broken when I implement bootstrap during the half way of my project, fixed that with some css modification, and I had commented out this

当我在项目进行到一半的时候实现引导程序时，我的布局被破坏了，通过一些 css 修改修复了这个问题，我已经注释掉了这个

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

in bootstrap.css, will that affect its core? I just want to use the grid system in my project..

在 bootstrap.css 中，这会影响它的核心吗？我只想在我的项目中使用网格系统..

采纳答案by Bass Jobsen

Yes, don't do that. Removing the box-sizing: border-boxwill ruin your grid. See also: Why did Bootstrap 3 switch to box-sizing: border-box?

是的，不要那样做。删除box-sizing: border-box将破坏您的网格。另请参阅：为什么 Bootstrap 3 切换到 box-sizing: border-box？

An example to show what happens:

显示发生了什么的示例：

<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>

With:

和：

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

The above will result in:

以上将导致：

With box-sizing: border-boxthe gutter construct by padding will be out of the calculating of your column's width.

随着box-sizing: border-box由填充排水沟构造将是你列的宽度计算出来。

Try to understand Bootstrap's grid and the box-sizing: border-boxand figure out why this will ruin your layout. Fix this problems or consider to don't use Bootstrap at all for your project.

尝试了解 Bootstrap 的网格并box-sizing: border-box弄清楚为什么这会破坏您的布局。解决此问题或考虑在您的项目中根本不使用 Bootstrap。

回答by user193130

I have the same problem and bootstrap 3 destroys my existing layouts and third party widgets. Here are something things I've tried in order of increasing difficulty and stability.

我有同样的问题，bootstrap 3 破坏了我现有的布局和第三方小部件。以下是我为了增加难度和稳定性而尝试过的一些事情。

Easiest Way

最简单的方法

Safe only if you don't use other bootstrap components

仅当您不使用其他引导程序组件时才安全

Add the following css after the bootstrap css is loaded:

加载 bootstrap css 后添加以下 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;
}

This will use the border-boxsizing only for elements within the grid system. This won't work if you have custom widgets within the grid as they would still have border-boxapplied.

这将border-box仅对网格系统内的元素使用大小调整。如果您在网格中有自定义小部件，这将不起作用，因为它们仍然会border-box应用。

More targeted approach

更有针对性的方法

Safe only if you don't use other bootstrap components

仅当您不使用其他引导程序组件时才安全

Alternatively, you could add a custom colclass to every column div which already have a col-*-*applied like so:

或者，您可以col向每个已经col-*-*应用的列 div添加一个自定义类，如下所示：

<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>

Then use the following css instead:

然后使用以下 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;
}

This works fine if you ONLY need to use the bootstrap grid system in your project. If you intend to use other bootstrap components however, I don't recommend this approach either since other bootstrap components would depend on the border-boxbeing set.

如果您只需要在项目中使用引导网格系统，这可以正常工作。但是，如果您打算使用其他引导程序组件，我也不推荐这种方法，因为其他引导程序组件将取决于border-box设置。

Cherry-pick each containing element to fix

樱桃挑选每个包含元素来修复

A still better way would be to just override the box-sizing as content-boxon a specific parent element for a widget like this:

一个更好的方法是将 box-sizing 覆盖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;
}

This approach offers the best forward compatibility with future bootstrap components, even if it seems to be working for you now.

这种方法提供了与未来引导组件的最佳向前兼容性，即使它现在似乎对您有用。

回答by Benn

Add this in your mixin or variables less and make sure it loads after scaffolding.less It resets the bs3 box-sizing and applies it again to specific elements and all BS3 required elements. I found that most mess created by the default BS3 box sizing is when it is applied to

将此添加到您的 mixin 或变量 less 中，并确保它在 scaffolding.less 之后加载。它重置 bs3 box-sizing 并将其再次应用于特定元素和所有 BS3 所需元素。我发现由默认 BS3 框大小创建的大多数混乱是将其应用于

a,ul,li

The magic

魔法

* {
  .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);
}

回答by Arun Prasad E S

I used a combination of above solutions to fit my need (I used only the grid system, everything else was already there)

我使用了上述解决方案的组合来满足我的需要（我只使用了网格系统，其他一切都已经存在）

/* *,
*: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;
}

The grid was taking too much margin and padding so i replaced all the

网格占用了太多的边距和填充，所以我替换了所有的

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

to(I commented out the margins)

to（我注释掉了边距）

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

and

和

.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;
}