处理Bootstrap列的可用空间

Question

Bootstrap的网格系统存在很大问题。我的问题是连续12个部分的自由空间：

正如你所看到的，这两个列之间只有1点的差异，但由于网格系统中每个点的巨大努力，它们之间有一个自由空间。

因此，如果我们有一个大屏幕，那么这个可用空间会更大。我想要的是这样的：每一列只是包装它的内容并删除不必要的空间！由于我在整个项目中使用Bootstrap的网格系统，我必须使用它，但我想要一个像wrap-content这样的功能。

如果一行可以超过12个部分，我们可以创建更准确的部分。

在图片中描述的这种情况下，如果我调整页面大小，cols也可能相互重叠。我只是留在一个小空间的旁边。

Answer 1

额外的空间正是因为Bootstrap将宽度设置为％中的col-*。

e.g

.col-xs-3 {
    width: 25%;
}
.col-xs-2 {
    width: 16.66666667%;
}

Check this out for more information

通过这样做，您将实现您想要的目标：

.wrap-content{
    width: auto;
    border: 1px solid; /*only to show the boundaries of the elements*/
}

<div class="row">
    <div class="col-xs-2 wrap-content">
        <button class="my-btn">button</button>
    </div>
    <div class="col-xs-3 wrap-content">
        <button class="my-btn">button</button>
    </div>
</div>

Here a working JSFiddle

但我真的建议你使用不同的标记，不要更改引导程序的网格系统，否则最终会造成不一致。

我使用col-xs只是为了使jsfiddle示例可行，将其更改为您想要的col-。

Answer 2

如何尝试

float:right

表示col-lg-2和

float:left

for col-lg-3