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

Question

我在使用Bootstrap的汉堡包菜单中发生了这个奇怪的问题。它正在向右伸展，我不明白为什么。它在附加的片段编辑器中看起来很好，我的图片如下。有什么可以导致这种情况的想法吗？

＆＃13;

＆＃13;

<!-- 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">
      	<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>
      	</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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

它很可能被称为'.navbar-toggle'，所以请查找并修改填充或边距。如果您看不到任何填充或边距，请尝试使用0px！important添加它。

Answer 2

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

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

您还可以检查并切换padding:或任何margin:属性设置，看看是否可以修复此问题。但是，这绝对是一个CSS问题。如果您不想在上面执行此操作，请尝试通过上面的“检查工具”或甚至整个样式表和CSS禁用某些CSS属性，以查看是否通过这样做可以恢复到正确的宽度并且可以隔离您的冲突。