html - 如何使导航栏中的引导按钮跨越整个导航栏

Question

我现在正在使用 bootstrap 来制作我的导航栏，我想要在我的导航栏中唯一的东西是 3 个按钮，当点击链接到其他页面时。截至目前，我看起来像这样:

/image/31s1f.jpg

如您所见，这些按钮的大小都与其中的文本一样大。现在的代码对他们来说也非常简单:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">

    <!-- Collect the nav links, forms, and other content for toggling -->
      <ul class="nav navbar-left">
        <button class="btn btn-default" id="settings" name="settings">SETTINGS</button>
      </ul>

      <ul class="text-center">
        <button class="btn btn-default" id="create" name="create">CREATE A NEW POST</button>
      </ul>

      <ul class="nav navbar-right">
        <button class="btn btn-default" id="myprofile" name="myprofile">MY PROFILE</button>
      </ul>

  </div>
</nav>

如何让按钮占据整个导航栏？还是有更好的方法来解决这个问题？

Answer 1

欢迎来到社区。

---

flex-grow-1占用尽可能多的可用空间。

有几种方法可以做到这一点。但我认为最好使用 flex-grow-1按钮上的类。它没有错误，当同一行上没有足够的空间容纳三个时，换行符，它们各自占据所有可用空间。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
  <button class="btn btn-default flex-grow-1" id="settings" name="settings">SETTINGS</button>
  <button class="btn btn-default flex-grow-1" id="settings" name="settings">CREATE A NEW POST</button>
  <button class="btn btn-default flex-grow-1" id="settings" name="settings">MY PROFILE</button>
</nav>

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

现在，由于 flex-grow-1 包含三个元素类，它们父级的宽度在它们之间按比例分配。

---

您可以使用 mb-* or my-* 在按钮上添加一些边距。如果换行，最好在按钮下方留出相同的空间。

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

---

---

如果您希望每个按钮占导航的 100% 宽度，请使用 d-block在导航和w-100在按钮上。

• 导航栏是 flex默认情况下。 d-block成功了 block
• w-100将按钮的宽度设置为 100%

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-block ">
  <button class="btn btn-default w-100 m-1" id="settings" name="settings">SETTINGS</button>
  <button class="btn btn-default w-100 m-1" id="settings" name="settings">CREATE A NEW POST</button>
  <button class="btn btn-default w-100 m-1" id="settings" name="settings">MY PROFILE</button>
</nav>

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