时间戳

首页 > 解决方案 > 如何使用 Bootstrap 使导航栏切换按钮/下拉菜单在“sm”屏幕尺寸下工作？

twitter-bootstrap - 如何使用 Bootstrap 使导航栏切换按钮/下拉菜单在“sm”屏幕尺寸下工作？

问题描述

我在一个网站上工作，我花了一天左右的时间试图让切换按钮以“sm”屏幕大小显示下拉菜单。如果您单击下面的链接到我的 GitHub 网站，您可以看到当您将屏幕尺寸最小化为“xs”（最大 767px）时，该按钮出现并正常工作，但在“sm”（768px 到 991px）中无法正常工作）。Github 网站

*如果您删除“可见性：隐藏；” 从小的@media 查询中，您会看到下拉列表显示在错误的位置。

标签： twitter-bootstrapdrop-down-menutogglenavbar

解决方案

问题出在您的 styleSheet 中，即left-margin = -25px。因此，每当它进入该空间时，它就会出现在左边框旁边，但增加屏幕的宽度会很好。

我建议您使用left-margin = 0px。它会很好，就像其他尺寸的屏幕一样。

---your code
@media (min-width: 768px) and (max-width: 991px) {
/* Home Page */
.navbar-brand h1{
    font-size: 4vw;
    margin: 35px 0 0 -25px;
}

用这个

  margin: 35px 0 0 0px;

推荐阅读