Bootstrap嵌套列似乎留下了额外的空间

Question

当我连续做这样的事情时：

<div class="col-sm-2">
    <div class="col-sm-10" style="height: 100%; margin: 0px; padding: 0px;">
    </div>
</div>
<div class="col-sm-6">
</div>

col-sm-2和col-sm-6之间会有一个空格，其中嵌套列不会填充整个col-sm-2宽度。你是如何解决这个问题的？

Answer 1

因为其中任何一个（或两者都取决于你的意图）：

• 嵌套列使用 .col-sm-10 ，而如果你已经 .col-sm-12
• 还不满？也许你想在 .col-sm-2
中使用 padding：0

Answer 2

我添加了评论，我会回答给出详细解释。

每个col-在bootstrap css中都有一个填充，为了删除该填充并使嵌套的col-没有显示额外的填充，你必须将类row添加到父母div。

所以将<div class="col-sm-2">更改为<div class="col-sm-2 row">并从嵌套div中删除margin: 0px; padding: 0px;。

希望我能正确理解你的问题。

工作小提琴：

https://jsfiddle.net/xp661ow3/

这就是我看起来的样子

修改了一些拼写错误