为什么我的右侧导航在Bootstrap 3中与我的左侧重叠

时间:2015-08-12 23:39:32

标签: twitter-bootstrap twitter-bootstrap-3

我正在使用我网站上的默认导航栏。我左边有4个li导航链接,右边有4个li。

我遇到的问题是当我调整窗口大小时,右侧导航链接会在折叠之前被推到左侧导航链接下。

我希望在将其推到左侧菜单链接下方之前将其折叠。

有谁知道我怎么能做到这一点?

任何帮助都会非常感激!

谢谢!

   <nav class='navbar navbar-default navbar-static-top' role='navigation'>
        <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' aria-expanded='false'>
                    <span class='sr-only'>Toggle navigation</span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                </button>

                    <a href="http://localhost/Freelance/home/index?testing=true"><img src="http://localhost/logo.png" alt="" /></a>


        </div><div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'><ul class='nav navbar-nav navbar-left'><li><a href="http://localhost/Freelance/client/projects/index">View All Projects</a></li><li><a href="http://localhost/Freelance/messages/messagetpl/managetpl/index">Message Templates</a></li><li><a href="http://localhost/Freelance/client/projects/index?section=manage_hired_freelancers">Manage Hired Freelancers</a></li></ul>

    <!-- Collect the nav links, forms, and other content for toggling -->

        <ul class='nav navbar-nav navbar-right'><li><a href="http://localhost/Freelance/projcollab/hiredprojects/index">Project Collaboration</a></li><li><a href="http://localhost/Freelance/messages/allmessages/index?m=ufn256HeKFHL1VQ6wWxPB242CiMlMuvjgu%2Fct%2BpjJab0FVxFSh4G8YDwX3Uc7dKxNTCSbxTQgt%2F%2FOCOzvSxXKHWrTwYZTO0KLY3rgyUwwKdJYt9SONqios2Ax5XwAVJh">Inbox</a></li><li><a href="http://localhost/Freelance/#">Contact Us</a></li>
            <li><li class='dropdown'>
            <a class='dropdown-toggle' aria-expanded='false' aria-haspopup='true' role='button' data-toggle='dropdown' href='#'> json2021@gmail.com
            <span class='caret'></span> </a>


        <ul class='dropdown-menu'>
        <li><a href="http://localhost/Freelance/#">Account Settings</a></li>
    <li><a href="http://localhost/Freelance/#">Financial Summary</a></li>
    <li><a href="http://localhost/Freelance/#">Contact us</a></li>
    <li><a href="http://localhost/Freelance/#">Log out</a></li>


        </ul>
    </li>

        </li>
        </ul>
    </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
    </nav>

2 个答案:

答案 0 :(得分:0)

根据您提供的代码,您错过了(我认为)def parse(self, response): sites = response.xpath('//div[contains(@class,"store_pricetable")]') items = [] for site in sites: item = mspItem() item['model_name'] = response.xpath('//h2[contains(@class,"priceindia")]/text()').extract() item['price'] = site.xpath('.//div[@class="store_price"]/text()').extract() items.append(item) return items 类的结束</div>标记以及结束container-fluid标记(除非您故意没有&#39;}添加这些?)

此外,您的HTML中也会显示此问题,这会导致显示问题:

</nav>

然后在底部你关闭它:

        <li>
        <li class='dropdown'>
            <a class='dropdown-toggle'....

您似乎只需要删除额外的 </ul> </li> </li> <li>。希望有所帮助。

答案 1 :(得分:0)

最终问题是链接的标题太长,以至于当视口减少时,给定的空间根本无法容纳它们。

如果您查看我发布的示例,则会显示原始navbar,其中一个字体大小严重(不受欢迎,仅用于说明我的观点),另一个使用图标帮助解决问题。如果你将它打开成整页并开始减少它,你就会明白我的意思。

可能的解决方法:

  • 更改链接标题以适应视口时的空间 变化。
  • 使用更多下拉列表。
  • 用图标替换一些链接以节省空间。

&#13;
&#13;
@media (min-width: 768px) {
  #test .navbar-nav li a {
    font-size: 8px;
  }
}
.divider {
  margin: 75px 0;
  border-bottom: 4px solid #f00;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class='navbar navbar-default navbar-static-top' role='navigation'>
  <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' aria-expanded='false'> <span class='sr-only'>Toggle navigation</span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>

      </button>
      <a href="http://localhost/Freelance/home/index?testing=true">
        <img src="http://placehold.it/50x50/f00" alt="" />
      </a>

    </div>
    <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
      <ul class='nav navbar-nav navbar-left'>
        <li><a href="http://localhost/Freelance/client/projects/index">View All Projects</a>

        </li>
        <li><a href="http://localhost/Freelance/messages/messagetpl/managetpl/index">Message Templates</a>

        </li>
        <li><a href="http://localhost/Freelance/client/projects/index?section=manage_hired_freelancers">Manage Hired Freelancers</a>

        </li>
      </ul>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <ul class='nav navbar-nav navbar-right'>
        <li><a href="http://localhost/Freelance/projcollab/hiredprojects/index">Project Collaboration</a>

        </li>
        <li><a href="http://localhost/Freelance/messages/allmessages/index?m=ufn256HeKFHL1VQ6wWxPB242CiMlMuvjgu%2Fct%2BpjJab0FVxFSh4G8YDwX3Uc7dKxNTCSbxTQgt%2F%2FOCOzvSxXKHWrTwYZTO0KLY3rgyUwwKdJYt9SONqios2Ax5XwAVJh">Inbox</a>

        </li>
        <li><a href="http://localhost/Freelance/#">Contact Us</a>

        </li>
        <li>
          <li class='dropdown'> <a class='dropdown-toggle' aria-expanded='false' aria-haspopup='true' role='button' data-toggle='dropdown' href='#'> json2021@gmail.com
            <span class='caret'></span> </a>

            <ul class='dropdown-menu'>
              <li><a href="http://localhost/Freelance/#">Account Settings</a>

              </li>
              <li><a href="http://localhost/Freelance/#">Financial Summary</a>

              </li>
              <li><a href="http://localhost/Freelance/#">Contact us</a>

              </li>
              <li><a href="http://localhost/Freelance/#">Log out</a>

              </li>
            </ul>
          </li>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<div class="divider"></div>
<nav class='navbar navbar-default navbar-static-top' role='navigation'>
  <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-2' aria-expanded='false'> <span class='sr-only'>Toggle navigation</span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>

      </button>
      <a href="http://localhost/Freelance/home/index?testing=true">
        <img src="http://placehold.it/50x50/266080" alt="" />
      </a>

    </div>
    <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-2'>
      <ul class='nav navbar-nav navbar-left'>
        <li><a href="http://localhost/Freelance/client/projects/index">View All Projects</a>

        </li>
        <li><a href="http://localhost/Freelance/messages/messagetpl/managetpl/index">Message Templates</a>

        </li>
        <li><a href="http://localhost/Freelance/client/projects/index?section=manage_hired_freelancers">Manage Hired Freelancers</a>

        </li>
      </ul>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <ul class='nav navbar-nav navbar-right'>
        <li><a href="http://localhost/Freelance/projcollab/hiredprojects/index"><i class="fa fa-users"></i></a>

        </li>
        <li><a href="http://localhost/Freelance/messages/allmessages/index?m=ufn256HeKFHL1VQ6wWxPB242CiMlMuvjgu%2Fct%2BpjJab0FVxFSh4G8YDwX3Uc7dKxNTCSbxTQgt%2F%2FOCOzvSxXKHWrTwYZTO0KLY3rgyUwwKdJYt9SONqios2Ax5XwAVJh"><i class="fa fa-paper-plane"></i></a>

        </li>
        <li><a href="http://localhost/Freelance/#"><i class="fa fa-map-marker"></i></a>

        </li>
        <li class='dropdown'>
          <a class='dropdown-toggle' aria-expanded='false' aria-haspopup='true' role='button' data-toggle='dropdown' href='#'> <i class="fa fa-user"></i>
            <span class='caret'></span> 
          </a>

          <ul class='dropdown-menu'>
            <li><a href="http://localhost/Freelance/#">Account Settings</a>

            </li>
            <li><a href="http://localhost/Freelance/#">Financial Summary</a>

            </li>
            <li><a href="http://localhost/Freelance/#">Contact us</a>

            </li>
            <li><a href="http://localhost/Freelance/#">Log out</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="divider"></div>
<nav class='navbar navbar-default navbar-static-top' id="test" role='navigation'>
  <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-3' aria-expanded='false'> <span class='sr-only'>Toggle navigation</span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>

      </button>
      <a href="http://localhost/Freelance/home/index?testing=true">
        <img src="http://placehold.it/50x50/000" alt="" />
      </a>

    </div>
    <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-3'>
      <ul class='nav navbar-nav navbar-left'>
        <li><a href="http://localhost/Freelance/client/projects/index">View All Projects</a>

        </li>
        <li><a href="http://localhost/Freelance/messages/messagetpl/managetpl/index">Message Templates</a>

        </li>
        <li><a href="http://localhost/Freelance/client/projects/index?section=manage_hired_freelancers">Manage Hired Freelancers</a>

        </li>
      </ul>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <ul class='nav navbar-nav navbar-right'>
        <li><a href="http://localhost/Freelance/projcollab/hiredprojects/index">Project Collaboration</a>

        </li>
        <li><a href="http://localhost/Freelance/messages/allmessages/index?m=ufn256HeKFHL1VQ6wWxPB242CiMlMuvjgu%2Fct%2BpjJab0FVxFSh4G8YDwX3Uc7dKxNTCSbxTQgt%2F%2FOCOzvSxXKHWrTwYZTO0KLY3rgyUwwKdJYt9SONqios2Ax5XwAVJh">Inbox</a>

        </li>
        <li><a href="http://localhost/Freelance/#">Contact Us</a>

        </li>
        <li>
          <li class='dropdown'> <a class='dropdown-toggle' aria-expanded='false' aria-haspopup='true' role='button' data-toggle='dropdown' href='#'> json2021@gmail.com
            <span class='caret'></span> </a>

            <ul class='dropdown-menu'>
              <li><a href="http://localhost/Freelance/#">Account Settings</a>

              </li>
              <li><a href="http://localhost/Freelance/#">Financial Summary</a>

              </li>
              <li><a href="http://localhost/Freelance/#">Contact us</a>

              </li>
              <li><a href="http://localhost/Freelance/#">Log out</a>

              </li>
            </ul>
          </li>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
&#13;
&#13;
&#13;