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

我希望我的引导按钮占用较小屏幕的全屏幕宽度（很好，几乎）。 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>

感谢

来源

2016-09-12 ABor

你在“行”“col”类中使用它吗？ – Aravind

遗憾的是没有一个'class'bootstrap来应用th是'效应'。你唯一能做的就是在CSS上使用@media。您可以使用它：

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

您可以将按钮上的“关口”类之一，但按钮的“盒子”将不会跟随它的内容的大小。

我希望它能帮助你。 :)

来源

2016-09-12 13:55:43

添加形式控制类

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

来源

2016-09-12 13:54:54 Aravind

不幸的是，'form-control'使得按钮在任何时候都能达到100％的宽度，而不仅仅是在小屏幕上。 – nonzaprej

创建这个新的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提出一个更好的主意。

来源

2016-09-12 14:04:24 Mistalis

谢谢。我可以问你一个额外的问题吗？为什么在自制课程上进行操作比在预定义课程上进行的操作考虑更好的设计？ – ABor

编辑由Bootstrap定义的类可能会影响Bootstrap的正常运行：如果您这样做，则应用程序的所有按钮都将受到影响。在你的情况下，这是一个小小的改变，但是如果你的应用程序增长，你将无法有效地控制更改。专门为此创建一个类（如我所建议的）更清洁，不需要修改Bootstrap的CSS。 – Mistalis

我想指出这是一个普遍的建议，它不仅适用于这种情况。我建议不要直接编辑Bootstrap文件，当它可以避免时:-) – Mistalis

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

回答

相关问题