Javascript 处理Bootstrap'；s列'；s自由空间

我对

Bootstrap

的网格系统有一个很大的问题。我的问题是，由于一行中只有12个部分，因此存在可用空间：

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

所以如果我们有一个大屏幕，自由空间会大得多。我想要的是这样的：每一列只需包装它的内容，并删除不必要的空间！由于我在整个项目中使用了

Bootstrap

的网格系统，所以我必须使用它，但我需要一个类似

wrap content

的功能

事件如果一行可以超过12节，我们可以创建更精确的零件

在图片中描述的这种情况下，如果我调整页面大小，COL也可能相互重叠。我只是想让他们在一起留点空间。

试试怎么样

float:right

对于col-lg-2和

float:left

---

对于col-lg-3

来说，额外的空间正是因为引导将宽度设置为%中的

col-*

e、 g

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

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

.wrap内容{
宽度：自动；
边框：1px实心；/*仅用于显示元素的边界*/
}
按钮
按钮

但我真的建议你使用不同的标记，不要改变网格系统的引导，这最终会造成不一致

---

我使用

col xs

只是为了使JSFIDLE示例可行，将其更改为所需的

col-

您可以在一行内创建12列，但在该行内。col-lg-2您可以再次创建12列。如果内容相同，为什么不在这两行中设置

col-lg-2

，我无法将这两个按钮与页面中的其他元素对齐。左按钮将始终位于其父按钮的内部。

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