css - 使列仅与其内容一样宽

Question

有没有办法让 bootstrap 中的列的宽度与其内容一样宽？

我有一个元素列表。 html 看起来像这样:

<div class="row">
            <div class="col-lg-1 " style="background-color: rebeccapurple">
                <input type="checkbox">
            </div>
            <div class="col-lg-10" style="background-color: #007fff">
                Title
            </div>
            <div class="col-lg-1" style="background-color: #777620">
                "Button Group
            </div>
</div>

我希望第一列和最后一列的宽度与其内容一样宽。

Answer 1

在每个要自动调整大小的 div 的样式属性中设置 width:auto;

<div class="row">
    <div class="col-lg-1 " style="background-color: rebeccapurple;width:auto;">
        <input type="checkbox">
    </div>
    <div class="col-lg-10" style="background-color: #007fff;">
        Title
    </div>
    <div class="col-lg-1" style="background-color: #777620;  width:auto;">
        "Button Group
    </div>
</div>