Bootstrap 4：在小屏幕上的导航栏菜单上使用块级按钮，但在展开时保持正常大小的按钮答案

【问题标题】：Bootstrap 4: Use block level buttons on navbar menu on small screen but keep normal sized button when expandedBootstrap 4：在小屏幕上的导航栏菜单上使用块级按钮，但在展开时保持正常大小的按钮
【发布时间】：2018-03-22 04:46:40
【问题描述】：

我正在使用 bootstrap 4 beta。

我有一个导航栏，当屏幕全屏时，它使用标准大小的按钮作为导航项，这些按钮显示在导航栏的右侧，与位于导航栏左侧的站点徽标内联。

当屏幕很小并且切换汉堡菜单时，我希望这些按钮跨越导航栏下拉菜单的宽度。

目前这些都按照下图左对齐。

我认为使用块级按钮会在下拉菜单上为我提供所需的结果，但它们不适用于全尺寸导航栏...

我的问题是如何使第二张图片中的按钮在切换汉堡菜单时跨越下拉菜单的宽度，但在屏幕较大且折叠到汉堡菜单时也显示为正常大小t 发生在第一张图片中？

【问题讨论】：

我的事情你必须用他的媒体查询配置检查课程以自定义
感谢@Henrique YC - 你的意思是我应该使用 css 媒体查询来根据屏幕大小应用不同的按钮类吗？我以前没有这样做过，但会检查一下
我有时我们有自定义的东西类或应用一种样式来指定边
谢谢，我会调查的！
似乎使用'width: 80vw;'在 CSS 媒体查询中，我可以做我需要做的事情！

标签： html css bootstrap-4

【解决方案1】：

似乎使用 width: 90vw;在 CSS 媒体查询中解决了这个问题：

#header-button {
    margin-top: 0.5;
    margin-bottom: 0.5;    
    margin-left: 0rem;
    margin-right: 0.5rem;

}

@media (max-width: 987px) {  
#header-button {
    width: 90vw;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    padding-bottom: 0.8rem;
    margin-left: 0.2rem;
}

}

现在看起来像：

黑色斑点遮住了我的徽标...

这意味着我不需要更改按钮类，我是从下面链接的 stackoverflow 问题中找到的（最后一个答案）：

Set CSS class equal BootStrap class with media query

【讨论】：