为什么导航栏内的容器有限制宽度而不是填充整个宽度？

【问题标题】：Why container inside the navbar have restricted width instead of filling the entire width?为什么导航栏内的容器有限制宽度而不是填充整个宽度？
【发布时间】：2020-01-18 04:04:27
【问题描述】：

我正在尝试在我的网站中创建一个带有100% width 的导航栏，但我需要在我的div 标签中添加ul 标签来填充整个width。

<nav class="navbar navbar-dark navbar-expand ">
    <div class="container-fluid">
        <ul class="navbar-nav">
            <li class="navbar-item col-5">Nav 1</li>
            <li class="navbar-item col-3">Nav 2</li>
            <li class="navbar-item col-3">Nav 3</li>
        </ul>
    </div>
</nav>

【问题讨论】：

标签： html css twitter-bootstrap navbar nav

【解决方案1】：

你应该在你的导航之外定义你的容器：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container-fluid">
  <nav class="navbar navbar-dark navbar-expand ">
    <ul class="navbar-nav" style="background: red; width: 100%">
        <li class="navbar-item col-5">Nav 1</li>
        <li class="navbar-item col-3">Nav 2</li>
        <li class="navbar-item col-3">Nav 3</li>
    </ul>
  </nav>
</div>

【讨论】：