Html 无法获取用于栅格的宽度

我正在玩一个迷你网格，即使我的列宽等于100%，第三列也在包装。我做错了什么

HTML

---

谢谢

只需减少几个像素-

.row {
    width: 100%;
}

.col-md-2 {
    display: inline-block;
    width: percentage((2 / 12));
    margin: -2px;
}

.col-md-3 {
    display: inline-block;
    width: percentage((3 / 12));
    margin: -2px;
}

.col-md-7 {
    display: inline-block;
    width: percentage((7 / 12));
    margin: -2px;
}

---

问题在于空格，最简单的解决方案是将html内联编写：

<div class="row"><div class="bor col-md-7">Here 1</div><div class="bor col-md-3">Here 2</div><div class="bor col-md-2">Here 3</div></div>

此处1此处2此处3

这是

或者您可以将父级的

font-size

更改为

0

，并为其子级提供一些字体大小值，即

font-size:1em

最后一个解决方案可能是儿童的负边际（正如其他答案所建议的）

---

阅读更多信息。

因此，如果我在列中添加float left，那么它就可以工作了，但我认为内联块将使我不必为$I从1到12{.col md-{$I}{width:percentage（$I/12））；@extend%sameStuff；}放置floatsDRY

{display:inline block；margin:-2px；}@我最喜欢字体大小的概念
.row {
    width: 100%;
}

.col-md-2 {
    display: inline-block;
    width: percentage((2 / 12));
    margin: -2px;
}

.col-md-3 {
    display: inline-block;
    width: percentage((3 / 12));
    margin: -2px;
}

.col-md-7 {
    display: inline-block;
    width: percentage((7 / 12));
    margin: -2px;
}

<div class="row"><div class="bor col-md-7">Here 1</div><div class="bor col-md-3">Here 2</div><div class="bor col-md-2">Here 3</div></div>