我现在正在使用引导程序制作导航栏，而导航栏中我唯一想要的就是3个按钮，它们在单击时链接到其他页面。截至目前，我的外观如下：
https://i.stack.imgur.com/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>
如何使按钮占据整个导航栏？还是有更好的方法来解决这个问题？
答案 0 :(得分：1)
您需要在li元素内使用ul元素。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<body>
<nav class="navbar navbar-dark">
<ul class="nav">
<li class="nav-item">
<button class="btn btn-default" id="settings" name="settings">SETTINGS</button>
</li>
</ul>
<ul class="nav">
<li class="nav-item">
<button class="btn btn-default" id="create" name="create">CREATE A NEW POST</button>
</li>
</ul>
<ul class="nav">
<li class="nav-item">
<button class="btn btn-default" id="myprofile" name="myprofile">MY PROFILE</button>
</li>
</ul>
</nav>
答案 1 :(得分：0)
欢迎来到社区。
flex-grow-1占用了尽可能多的空间。有两种方法可以做到这一点。但是我认为最好在flex-grow-1上使用buttons类。
它是无bug的，并且如果在同一行中没有足够的空间容纳三个，则该行会中断，并且它们各自占用整个行。
<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类中包含三个元素，因此其父级的宽度在它们之间按比例分配。
您可以在按钮上使用m-* 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>