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>

在我看来，这比编辑Bootstrap类更好，因为Claudio B建议。

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

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

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

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

我希望它可以帮到你。：）

Answer 4

添加表单控件类

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

用于较小屏幕尺寸的自举按钮全宽度

4 个答案: