Question

网站来源：http://www.salefee.com/

我的网站上有一个导航栏。我已经使用css.While在第一页上格式化它，看起来很正常。但是当我导航到其他部分时，我可以观察到导航栏两侧的切口。我无法弄清楚这个问题。代码和屏幕截图如下所示：

<!-- NAVBAR -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <!-- Brand and Toggle -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#anch-top"><img src="images/logo.PNG" style="height:45px; width:60px;">Salefee</a>
          </div>
          <!-- End Brand and Toggle -->
          <!-- Menu -->
          <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active" data-toggle="collapse" data-target="#navbar-collapse-1">
                <a href="#anch-top" style="text-transform: uppercase;font-family: Sans-Serif">Home</a>
              </li>


              <li data-toggle="collapse" data-target="#navbar-collapse-1">
                <a href="#anch-gallery" style="text-transform: uppercase;font-family: Sans-Serif">Gallery</a>
              </li>

              <li data-toggle="collapse" data-target="#navbar-collapse-1">
                <a href="#anch-pricing" style="text-transform: uppercase;font-family: Sans-Serif"><marquee direction=right behavior=alternate width=65><super>STORY</super></marquee></a>
              </li>




               <li data-toggle="collapse" data-target="#navbar-collapse-1">
                <a href="#anch-team" style="text-transform: uppercase;font-family: Sans-Serif">Team</a>
              </li>

              <li data-toggle="collapse" data-target="#navbar-collapse-1">
                <a href="#anch-contact" style="text-transform: uppercase;font-family: Sans-Serif">Contact</a>
              </li>

               <li data-toggle="collapse" data-target="#navbar-collapse-1">
                <a href="jobs" style="font-family: Sans-Serif">JOBS</a>

               <li data-toggle="collapse" data-target="#navbar-collapse-1">
                <a href="blog" target="_blank" style="font-family: Sans-Serif">BLOG</a>
              </li>
            </ul>
          </div>
          <!-- End Menu -->
        </div>
      </nav>

屏幕截图1 :(正常）

截屏2 :(问题）

请帮我解决问题......提前致谢!!

Answer 1

只需输入您的css文件：

.navbar.affix{    height: 52px;}

和

div#navbar-collapse-1 {
min-width: 100%;
}

这样它也是响应式的，它完全适合所有屏幕宽度

Answer 2

您已在css中指定.navbar.affix类的高度。你应该使属性值为51px。您将看到它将解决问题。

.navbar.affix {
    position: fixed;
    top: 0;
    height: 51px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

Answer 3

你有 .navbar.affix 的样式，其中 height 在除主页之外的所有页面上设置为 46px ，我认为你应该删除< em> height 属性，只需添加 bottom：auto;

导航栏中的html格式问题

3 个答案: