Bootstrap 4:在小屏幕上使用导航栏菜单上的块级按钮，但在展开时保持正常大小的按钮
Bootstrap 4:在小屏幕上使用导航栏菜单上的块级按钮，但在展开时保持正常大小的按钮
提问于 2017-10-11 01:22:21
我使用的是bootstrap 4 beta版。
我有一个导航栏，当屏幕全尺寸时，它使用标准大小的按钮作为导航项目，这些按钮显示在导航栏的右侧，与站点徽标一起显示，站点徽标位于导航栏的左侧。
我希望这些按钮跨越宽度的导航栏下拉菜单时，屏幕很小，汉堡菜单是切换。
目前，这些都是左对齐，如下图所示。
我认为使用块级按钮会在下拉菜单上给我想要的结果，但它们在全尺寸导航栏上不起作用。
我的问题是，当切换汉堡菜单时，如何使第二张图片中的按钮跨越下拉菜单的宽度，但当屏幕较大且没有像第一张图片那样折叠到汉堡菜单时，如何使按钮显示为正常大小？
回答 1
Stack Overflow用户
发布于 2017-10-11 02:13:53
似乎在css媒体查询中使用width: 90vw；解决了这个问题：
#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;
}
}现在看起来是这样的：
黑色的斑点遮挡了我的标志。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46672469
复制相关文章
相似问题
腾讯云开发者
