css - 为什么元素没有间隔？

Question

嘿，我希望借助导航栏中的引导程序在网站中分隔 3 个 div，并且我没有得到想要的结果我希望 DIV 像这样，请帮助我用引导程序类解决它

<content of div1> <content of div2> <content of div3>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-sm navbar-light bg-light d-flex justify-content-between  ">
  <div>// div 1//
  </div>
  <div class="collapse navbar-collapse " id="navbarSupportedContent">// div 2//
  </div>
  <div>// div 3//
  </div>
</nav>

Answer 1

默认情况下.navbar-collapse设置为flex-grow:1。您需要禁用此功能才能获得所需的内容：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-sm navbar-light bg-light d-flex justify-content-between  ">
  <div>// div 1//
  </div>
  <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">// div 2//
  </div>
  <div>// div 3//
  </div>
</nav>