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

Question

我正在尝试在我的网站中使用 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>

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

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

Why container inside the navbar have restricted width instead of filling the entire width?

html

css

nav

navbar

twitter-bootstrap