我想自己克隆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列没有内联显示。有什么帮助吗？
编辑
好吧，我明白了：
我必须float: left在'col-'类中添加一个。
您的col-5的宽度为50％，不包括填充和可选边框等。因此2乘50％= 100％宽度+填充的宽度将导致宽度大于您的宽度。
您可以添加box-sizing: border-box;以将这些属性包括在宽度计算中。
===编辑答案===
使用盒大小调整。您需要添加一个float: left到您的列。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句