如何添加以证明Bootstrap 4导航的合理性

Question

我正在编写这个演示代码。为什么我无法在Bootstrap 4中创建合理的导航？

<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">
<ul class="nav nav-pills flex-column flex-md-row">
<li class="nav-item">
<a class="nav-link active" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
<div class="nav btn-group d-flex" id="v-pills-tab"  role="group" aria-label="Basic example">
<a class="btn btn-secondary btn-lg w-100 active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="btn btn-secondary btn-lg w-100" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="btn btn-secondary btn-lg w-100" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
</div>

Answer 1

我不确定你想证明什么，但如果是导航药丸，只需使用nav-fill。。。

<ul class="nav nav-pills nav-fill flex-column flex-md-row">
<li class="nav-item">
<a class="nav-link active" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>

https://www.codeply.com/go/8vgu9zsZQ0