twitter bootstrap box-sizing毁了我的布局

时间:2013-10-01 06:31:01

标签: css twitter-bootstrap twitter-bootstrap-3

当我在项目的一半时间实现bootstrap时我的布局坏了,修复了一些css修改,我已经注释掉了这个

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

在bootstrap.css中,会影响其核心吗?我只是想在我的项目中使用网格系统..

4 个答案:

答案 0 :(得分:57)

我有同样的问题,bootstrap 3破坏了我现有的布局和第三方小部件。这是我为了增加难度和稳定性而尝试过的东西。

最简单的方法

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

加载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;
}

这将仅对网格系统中的元素使用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;
}

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

Cherry-pick每个包含要修复的元素

更好的方法是在这样的小部件的特定父元素上覆盖大小为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;
}

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

答案 1 :(得分:10)

是的,不要那样做。删除box-sizing: border-box会破坏您的网格。另见:Why did Bootstrap 3 switch to box-sizing: 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;
} 

以上将导致:

enter image description here

使用box-sizing: border-box填充的装订线构造将不在计算列宽的范围内。

尝试了解Bootstrap的网格和box-sizing: border-box并弄清楚为什么这会破坏你的布局。修复此问题或考虑不要为您的项目使用Bootstrap。

答案 2 :(得分:3)

将你的mixin或变量添加到less中,并确保在scaffolding.less之后加载它 它重置bs3 box-sizing并将其再次应用于特定元素和所有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);
}

答案 3 :(得分:0)

我使用了上述解决方案的组合来满足我的需求 (我只使用了网格系统,其他一切都已存在)

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

到(我评论了边距)

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