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