导航栏菜单内容溢出父 div答案

【问题标题】：Navbar menu contents overflowing outside of the parent div导航栏菜单内容溢出父 div
【发布时间】：2017-07-26 21:09:17
【问题描述】：

我试图让导航栏菜单出现在“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>

【问题讨论】：

请从演示中查看完整页面以查看问题

标签： html css twitter-bootstrap

【解决方案1】：

只需从您的 #header-container CSS 规则中删除固定的 width: 960px;

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

【讨论】：

但我希望宽度为 960px
然后将这些 960px 宽度应用到 container 类
谢谢，原来我只需要为该容器设置一个最大宽度，这是一个更简单的解决方案！

【解决方案2】：

在我看来，您在结构中添加了.container div。它从引导程序继承规则并破坏您的布局。

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

【讨论】：

【解决方案3】：

问题是您要为包含 Bootstrap 标头的元素添加固定宽度。当.navbar-right（由Bootstrap 定义）尝试将float 转换为right 时，它会破坏布局，除非父级的宽度为100%（默认值）。只需删除 #header-container 上的 width 规范，您的链接就会正确地位于您的标题中：

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

希望这会有所帮助！ :)

【讨论】：

是的，但我想要宽度，这就是我制作 div 的原因！
当您说要为 Bootstrap 导航栏指定自定义 width 时，您到底想实现什么？通常，Bootstrap 导航栏占据整个宽度，您可以在内创建容器。您是否希望将 Bootstrap 导航栏集中在左侧和右侧，并在左侧和右侧使用不同的（可能重新着色）导航栏？您将在 Bootstrap 导航栏 inside 中创建第二个导航栏，而不是为其创建容器。或者右边的链接有更大的缩进？您可以使用 margin-right 来做到这一点。
也许我用错了方法。我希望导航栏的最大宽度为 960px 宽（以便所有内容都在 960px 宽的容器内）
原来我用错了方法，通过为内部容器设置最大宽度是一个简单的修复:)

**编辑**

编辑