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

无法添加到Justify Bootstrap 4导航中

1 个答案: