导航栏菜单内容溢出父div之外

时间:2017-07-26 21:09:18

标签: html css twitter-bootstrap

我试图让导航栏菜单显示在' header-container'菜单,但由于某种原因,导航栏链接流到外面(在修改浏览器窗口之前)。我无法弄清楚为什么,但我怀疑它与这一行有关:

div class =" collapse navbar-collapse navHeaderCollapse"

每当我向navHeaderCollapse中添加一个浮动内部链接时。添加溢出:无;只是隐藏了溢出,但首先不应该有任何溢出。

为什么链接不会留在header-container div中?



#header-container{
    width: 960px;
    height: 50px;
    background: #ff0;
    margin: 0 auto;
}

<head>
<meta charset="UTF-8">
<!-- STYLESHEETS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>




<header id="header-container">
        <div class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <a href="index.html" class="navbar-brand">Brand Name</a>

                    <!-- MOBILE BUTTON - VIEWABLE ON MOBILE SIZED BROWSERS ONLY -->
                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                        <!-- HAMBURGER MENU -->
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <div class="collapse navbar-collapse navHeaderCollapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </div>

            </div>
        </div>
    </header>
    
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:2)

只需清除width: 960px; CSS规则

中固定的#header-container即可

https://codepen.io/anon/pen/LjVjqE

答案 1 :(得分:1)

问题是您正在为包含Bootstrap标头的元素添加固定宽度。当.navbar-right(由Bootstrap定义)尝试floatright时,它会中断布局,除非父级的宽度为100%(默认值)。只需移除width上的#header-container规范,您的链接就会正确位于标题中:

<head>
  <meta charset="UTF-8">
  <!-- STYLESHEETS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<header id="header-container">
  <div class="navbar navbar-default navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <a href="index.html" class="navbar-brand">Brand Name</a>
        <!-- MOBILE BUTTON - VIEWABLE ON MOBILE SIZED BROWSERS ONLY -->
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
          <!-- HAMBURGER MENU -->
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

**编辑**

为了让导航栏占据960px的最大宽度,您需要修改预定义的.container类,而不是创建一个全新的类。请注意navbar-static-top 强制你有一个全宽(因为它是静态的),所以你还需要删除它。

.container {
  max-width: 960px;
}
<head>
  <meta charset="UTF-8">
  <!-- STYLESHEETS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<header id="header-container">
  <div class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <a href="index.html" class="navbar-brand">Brand Name</a>
        <!-- MOBILE BUTTON - VIEWABLE ON MOBILE SIZED BROWSERS ONLY -->
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
          <!-- HAMBURGER MENU -->
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

希望这有帮助! :)

答案 2 :(得分:1)

从我的角度来看,您在结构中添加了.container div。它从bootstrap继承规则并打破你的布局。

<header id="header-container">
        <div class="navbar navbar-default navbar-static-top">
            <div class="container"> <!-- remove this element, or change name-->
                <div class="navbar-header">