我的汉堡包菜单显示不正确

我有使用Bootstrap的汉堡包菜单发生这个奇怪的问题。它正在向右伸展，我不知道为什么。它在附加的片段编辑器中看起来很好，我的照片如下。任何想法可能导致这种情况？我的汉堡包菜单显示不正确

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<nav id="mynav" class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     \t <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
      <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     \t </button> 
 
     <a class="navbar-brand" href="#"><img src="" alt=""/>&#160;<span class="ms-rteThemeForeColor-1-0 ms-rteFontSize-4 ms-rteFontFace-5"></span></a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home<span class="sr-only"></span></a></li> 
 
     <li><a href="#">site1</a></li> 
 
     <li><a href="#">Site2</a></li> 
 
      <li><a href="#">Site 3</a></li> 
 
        <li><a href="#">Site 4</a></li></ul> 
 
       </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav>

来源

2017-04-05 Vzupo

在这样的场景中;最快的路线是使用检查员。右键点击按钮，然后点击Chrome中的“检查”。在任何跨度/ a/nav或图像上查找边距/填充。通过该示例的链接，可以给出进一步的细节。 – Zack

可以在检查.navba-toggle时添加控制台的图片。也可以添加关联的css图像。 – neophyte

我添加了检查控制台的图像 – Vzupo

很可能被称为像 '.navbar拨动'，所以找这个和修改填充或保证金。如果您看不到任何填充或边距，请尝试使用0px重要！

来源

2017-04-05 14:59:25 EmmaJ

作为一个测试，我试图隐藏.navbar切换在CSS并没有任何反应。 – Vzupo

当你说你把它藏在CSS中时，你究竟对它做了什么？ – EmmaJ

将css更改为.navbar-toggle.collapsed {display：none！important;} – Vzupo

您的问题可能来自您的引导CSS或任何其他'模板'样式CSS包括。尝试使用'检查工具'即找到selector。谷歌Chrome Developer控制台或Firebug，或IE开发工具，如果你必须。使用不正确的宽度定位元素的选择器，并在CSS中手动将所需宽度设置为该选择器。即。

.relevantSelector { 
    max-width: $maxwidth; 
    min-width: $minwidth; 
    width: $width; 
}

你也可以查看和切换padding:或任何margin:属性进行设置，看是否能修复它。但是，这绝对是一个CSS问题。如果你不想这样做，试着通过上面的“检查工具”或者甚至整个样式表和CSS来禁用你的一些CSS属性，看看是否这样做会回到正确的宽度，并且你可以隔离你的冲突。

来源

2017-04-05 15:00:51

通过.nav-bar-toggle切换填充{padding：10px;}是什么意思？ – Vzupo

是的，尝试使用不同的值或隐藏属性来查看它是否看起来更好或是否恢复到正确的宽度。 –

什么都没有更新。新增！重要; – Vzupo

我的汉堡包菜单显示不正确

回答

相关问题