Question

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

这是我的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>

这是它背后的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;以在宽度计算中包含这些属性。

===编辑回答===

使用了盒子大小。您需要在cols中添加float: left。

Answer 2

您缺少的是所有col课程上的浮动。我认为这就是你要找的东西。

＆＃13;

*[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% }

＆＃13;

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

＆＃13;

但说实话，从bootstrap源构建网格不是一个更好的主意吗？只需获取git repo并使用grunt构建网格，排除与网格系统无关的所有较少文件。看看已编译的css，你会发现，bootstraps网格系统还有很多比你想象的还多。

引导行系统克隆

2 个答案: