引导按钮全宽，适合较小的屏幕尺寸

Question

我希望我的引导按钮在较小的屏幕上占据全屏宽度（好吧，几乎）。

btn-block

确实使按钮延伸，但适用于所有类型的屏幕。

是否可以使用 CSS 自定义此

btn-block

（例如使用

@media

），以便仅针对较小的屏幕激活它？或者还有其他办法吗？

我的 HTML 按钮代码行如下：

<button type="submit" class="btn btn-lg btn-success">
    Submit
</button>
<button type="reset" class="btn btn-lg btn-warning">
    Reset
</button>

谢谢

AB

Answer 1

创建这个新的 CSS 类：

@media(max-width: 768px) {
    button.full-width {
        width: 100%;  
    }
}

然后将其应用到您的按钮上：

<button type="submit" class="btn btn-lg btn-success full-width">
    Submit
</button>
<button type="reset" class="btn btn-lg btn-warning full-width">
    Reset
</button>

在我看来，这比按照 Claudio B 的建议编辑 Bootstrap 类更好。

Answer 2

<div class="row">
    <div class="col-md-4">
        <button type="submit" class="btn btn-lg btn-success btn-block">Submit</button> 
    </div>
    <div class="col-md-4">
         <button type="submit" class="btn btn-lg btn-success btn-block">Submit</button>
    </div>
</div>

使用网格系统

Answer 3

不幸的是，没有一个引导程序的“类”来应用这种“效果”。你唯一能做的就是在CSS上使用@media。你可以使用它：

@media (max-width: 768px) {
    .btn, .btn-group {
        width:100%;
    }
}

您可以在按钮上应用“col”类之一，但按钮的“box”不会跟随其内容的大小。

希望可以帮到你。 :)

Answer 4

添加form-control类

<button type="submit" class="btn btn-lg btn-success form-control">
    Submit 
</button>
<button type="reset" class="btn btn-lg btn-warning form-control">
    Reset
</button>

Answer 5

在 Bootstrap v5 中你可以使用

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

如记录这里