无法获得宽度以使用网格

Question

我正在尝试使用迷你网格，尽管我的列宽等于 100%，但第三列正在换行。我做错了什么？

HTML

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

SASS（详见 JS fiddle SASS）

$width = 100%;
$max-col = 12;

.row {
    width: $width;
}

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

谢谢

Answer 1

只需减少几个像素 -

.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;
}

Answer 2

问题出在空格上，最简单的解决方案是编写 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>

这里是fiddle。

或者您可以将父级的 font-size 更改为 0，并为其子级提供一些字体大小值，即。 font-size: 1em

最后一个解决方案可能是儿童的负利润率（正如其他答案所建议的那样）。

另请阅读 this question 了解更多信息。

无法获得宽度以使用网格

Cannot get widths to work with grid

html

sass