代码之家 › 专栏 › 技术社区 › Andres SK

在引导按钮组DIV中使用块按钮

bootstrap-4 css

0

Andres SK · 技术社区 · 6 年前

我有一个带按钮组的容器。按钮居中,但其宽度需要为容器的50%,因此每个按钮占据容器的一半。我试过用 w-50 和 btn-block 但这并不能解决使用时的问题 btn-group S.

这是我当前的代码:

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

有什么想法吗?谢谢!

1 回复 | 直到 6 年前

1

IvanS95 6 年前

试试这个:

<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群 拥有财产 display: inline-flex ,因此不会使用容器的整个宽度。