适用于较小屏幕尺寸的Bootstrap按钮全宽

Question

我希望我的自举按钮占据整个屏幕宽度(好吧,差不多),用于较小的屏幕.btn-block确保按钮扩展,但适用于所有类型的屏幕.

可以btn-block使用CSS(例如使用@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

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

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

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

我希望它能帮助你。:)

Answer 3

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

使用网格系统