Question

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

div class =＆＃34; collapse navbar-collapse navHeaderCollapse＆＃34;

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

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

＆＃13;

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

＆＃13;

<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;

Answer 1

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

中固定的#header-container即可

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

Answer 2

问题是您正在为包含Bootstrap标头的元素添加固定宽度。当.navbar-right（由Bootstrap定义）尝试float到right时，它会中断布局，除非父级的宽度为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>

希望这有帮助！：）

Answer 3

从我的角度来看，您在结构中添加了.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">

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

3 个答案:

编辑

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

3 个答案:

**编辑**

编辑