Boostrap ish CSS不按预期工作

所以，我不得不开发一个网站的列，但我不被允许使用引导。所以我决定从他们的网格中借用一些东西来帮助我。Boostrap ish CSS不按预期工作

我创造了我这样的代码：

.container { 
    width: 970px; 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 

.container:before, .container:after { 
    display: table; 
    content: " "; 
} 

.container:after { 
    clear: both; 
} 

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

.container .row:before, .container .row:after { 
    display: table; 
    content: " "; 
} 

.container .row:after { 
    clear: both; 
} 

.container .row .col-1, .container .row .col-2, .container .row .col-3, .container .row .col-4, .container .row .col-5, .container .row .col-6, .container .row .col-7, .container .row .col-8, .container .row .col-9, .container .row .col-10, .container .row .col-11, .container .row .col-12 { 
    float: left; 
    position: relative; 
    min-height: 1px; 
    /*padding-right: 15px; 
    padding-left: 15px;*/ 
} 

.container .row .col-12 { 
    width: 100%; 
} 

.container .row .col-11 { 
    width: 91.66667%; 
} 

.container .row .col-10 { 
    width: 83.33333%; 
} 

.container .row .col-9 { 
    width: 75%; 
} 

.container .row .col-8 { 
    width: 66.66667%; 
} 

.container .row .col-7 { 
    width: 58.33333%; 
} 

.container .row .col-6 { 
    width: 50%; 
} 

.container .row .col-5 { 
    width: 41.66667%; 
} 

.container .row .col-4 { 
    width: 33.33333%; 
} 

.container .row .col-3 { 
    width: 25%; 
} 

.container .row .col-2 { 
    width: 16.66667%; 
} 

.container .row .col-1 { 
    width: 8.33333%; 
}

的问题是，这已经列之间没有填充因为它在引导。如果我尝试添加填充我的列包装到两行。没有填充，它工作正常。

我创建了一个jsfiddle here to show without padding

现在该行-margin我希望能够列上添加填充和它的工作，但as you can see from this jsfiddle，它包装成两行...

不有谁知道为什么？

来源

2015-05-21 r3plica

在上面的代码中，您正在注释列中的填充。您还需要在网格中添加框尺寸。最简单的方法...

* { 
    box-sizing: border-box; 
}

来源

2015-05-21 16:10:18

代码，我已经想通了这一点：通过检查其他网站通过使用开发工具去和取消CSS规则d，但感谢，这将有助于我希望的其他人 – r3plica

这只是引导程序如何工作的方式。每个col-6占用容器宽度的50％，即使添加1px填充，它也会显示为两行，因为每个col-6的宽度为50％+ 1px，（50％+ 1px）乘以两个> 100％（容器的宽度）。你可以不喜欢

<div class="col-5 yellow">

<div class="col-2">

<div class="col-5 green">

这会给你柱之间的山坳-2 “填充”。或者你也可以做div嵌套像

<div class="col-6">

<div class="padding yellow">

<p>haha</p>

</div>

</div> 和CSS应该像 .padding{margin:0 10px;}

来源

2015-05-21 16:24:36 Jaaaaaaay

您div越来越非常大的宽度在这里试着减少它的宽度

.container .row .col-6 { 
    width: 50%;// try to decrease it less then 40% 
    }

来源

2015-05-21 17:02:56

Boostrap ish CSS不按预期工作

回答

相关问题