Question

所以，我不得不开发一个包含列的网站，但我不允许使用bootstrap。所以我决定从他们的网格中借一些东西来帮助我。

我创建了这样的代码：

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

问题是列之间没有填充，就像它在bootstrap上一样。如果我尝试添加填充，我的列包裹在两行上。没有填充，它工作正常。

我创建了jsfiddle here to show without padding

现在在行上使用-margin我希望能够在列上添加填充并且它可以工作，但是as you can see from this jsfiddle，它包含在两行......

有谁知道为什么？

Answer 1

在上面的代码中，您正在评论列中的填充。您还需要在网格中添加box-sizing。最简单的方式......

* {
    box-sizing: border-box;
}

Answer 2

这就是bootstrap的工作方式。每个col-6占用50％宽度的容器，即使你添加1px填充，它也会显示为两行，因为每个col-6的宽度是50％+ 1px，并且（50％+ 1px）乘以2＆gt; 100％（容器的宽度）。你可以这样做

<div class="col-5 yellow">

<div class="col-2">

<div class="col-5 green">

这会给你一个col-2＆＃34;填充＆＃34;列之间。或者你可以做嵌套div，如

<div class="col-6">

<div class="padding yellow">

<p>haha</p>

</div>

</div> 而css应该是这样的 .padding{margin:0 10px;}

Answer 3

你的div宽度越来越大，尝试减少宽度

的代码

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

Boostrap ish CSS没有按预期工作

3 个答案: