Question

我试图在我的页面上水平居中两个单选按钮（在一组中）。这就是我到目前为止所拥有的。它不完全是中心。它有点左边。向右拉使其向右移动太远。我添加了中心块和文本中心，但它们根本没用。

有人可以帮忙吗？

<div class="row">
    <div class="col-sm-5">&nbsp;</div>
    <div class="col-sm-2">
        <div class="btn-group center-block text-center" data-toggle="buttons">
            <label class="btn btn-default center-block"><input type="radio">All</label>
            <label class="btn btn-default active center-block"><input type="radio">Filtered</label>
        </div>
    </div>
    <div class="col-sm-5">&nbsp;</div>
</div>

Answer 1

您需要在父div中使用text-center，而不是div居中。

<div class="row">
    <div class="col-sm-offset-5 col-sm-2 text-center">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default center-block"><input type="radio">All</label>
            <label class="btn btn-default active center-block"><input type="radio">Filtered</label>
        </div>
    </div>
</div>

此外，您应该使用col-sm-offset-5代替<div class="col-sm-5"> </div>。

Bootstrap 3水平中心按钮组连续

1 个答案:

Bootply Demo