引导行系统克隆

Question

我想自己克隆引导网格系统，但似乎遇到了一个我无法解决的问题：

这是我的html：

        <div class="row">
            <div class="col-5">
                <div class="card">
                    <div class="card-content">Card</div>
                </div>
            </div>
            <div class="col-5">
                <div class="card card-rounded">
                    <div class="card-content">Card-rounded</div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-10">
                <div class="card card-noshadow">
                    <div class="card-content">Card-noshadow</div>
                </div>
            </div>
        </div>

A这是它背后的css：

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

*[class^="col-"] {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    background-color: #f00;
}

.col-10 { width: 100% }
.col-9 { width: 90% }
.col-8 { width: 80% }
.col-7 { width: 70% }
.col-6 { width: 60% }
.col-5 { width: 50% }
.col-4 { width: 40% }
.col-3 { width: 30% }
.col-2 { width: 20% }
.col-1 { width: 10% }

这些是全局css设置：

box-sizing: border-box

我也在使用normalize.css。

问题是，这两个col-5列没有内联显示。有什么帮助吗？

编辑

好的，我明白了：

我不得不在“col”类中添加一个float: left。

Answer 1

您的col-5宽度为50%，即不包括填充和可选边框等。因此，2乘50% = 100%宽度+填充宽度比您所拥有的宽度更大。

可以添加box-sizing: border-box;以将这些属性包括在宽度计算中。

===编辑的答案===

采用箱形尺寸。你需要给你的科尔加一个float: left。

Answer 2

您缺少的是所有col类上的浮点。我想这就是你要找的。

​

*[class^="col-"] {
    position: relative;
    min-height: 1px;
    background-color: #f00;
    float: left;
    padding: 0 15px;
    box-sizing: border-box;
}

.col-10 { width: 100% }
.col-9 { width: 90% }
.col-8 { width: 80% }
.col-7 { width: 70% }
.col-6 { width: 60% }
.col-5 { width: 50% }
.col-4 { width: 40% }
.col-3 { width: 30% }
.col-2 { width: 20% }
.col-1 { width: 10% }

<div class="row">
    <div class="col-5">
        <div class="card">
            <div class="card-content">Card</div>
        </div>
    </div>
    <div class="col-5">
        <div class="card card-rounded">
            <div class="card-content">Card-rounded</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-10">
        <div class="card card-noshadow">
            <div class="card-content">Card-noshadow</div>
        </div>
    </div>
</div>

​

但是老实说，从引导源构建网格不是一个更好的主意吗？只需获取git，并使用grunt构建网格，排除所有与网格系统无关的文件。看看编译好的css，你会发现，引导网格系统比你想象的要多得多。