Question

我有一个带有按钮组的容器。这些按钮居中，但是它们的宽度需要为其容器的50％，以便每个按钮占据容器的一半。我尝试使用w-50和btn-block，但这在使用btn-group时并不能解决问题。

这是我当前的代码：

<div class="container text-center">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-outline-light">
            Back
        </button>
        <button type="submit" class="btn btn-outline-light">
            Next
        </button>
    </div>
</div>

有什么想法吗？谢谢！

Answer 1

尝试一下：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
    <div class="btn-group w-100" role="group">
        <button type="button" class="btn w-50 btn-primary">
            Back
        </button>
        <button type="submit" class="btn w-50 btn-primary">
            Next
        </button>
    </div>
</div>

您必须将btn-group容器设置为要使用的完整宽度，然后它将其按钮扩展到所需的宽度。默认情况下，btn-group具有属性display: inline-flex，因此它将不使用容器的整个宽度。

在Bootstrap按钮组div中使用阻止按钮

1 个答案: