html - 导航定位

Question

我想用 Bootstrap 4 框架创建一个侧边栏菜单。使用默认的 nav-pills 我怎样才能将两个药丸放在同一行？

请在下面找到默认代码:

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <a class="nav-link 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="nav-link" 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="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
    <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Answer 1

实现细节可能会有所不同，但我会用类似下面的方法来解决这个问题。

#tab-sidebar .nav-link {
    margin: 5px;
    border: 1px solid lightgray;
    
    /* This is just to center text in pills */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#tab-sidebar .nav-link.col-6 {
    /* 10px is just double the size of 5px margin set on .nav-link */
    max-width: calc(100% / 2 - 10px);
}

#tab-sidebar .nav-link.col-12 {
    max-width: calc(100% - 10px);
}

<div class="container">
    <div class="row">
        <div id="tab-sidebar" class="col-3 nav nav-pills" role="tablist" aria-orientation="vertical">
            <a id="pill-A" class="nav-link col-6 active" data-toggle="pill" href="#tab-A" role="tab" aria-controls="tab-A" aria-selected="true">A</a>
            <a id="pill-B" class="nav-link col-6" data-toggle="pill" href="#tab-B" role="tab" aria-controls="tab-B" aria-selected="false">B</a>
            <a id="pill-C" class="nav-link col-12" data-toggle="pill" href="#tab-C" role="tab" aria-controls="tab-C" aria-selected="false">C</a>
            <a id="pill-D" class="nav-link col-6" data-toggle="pill" href="#tab-D" role="tab" aria-controls="tab-D" aria-selected="false">Item D with Very Long Name</a>
            <a id="pill-E" class="nav-link col-6" data-toggle="pill" href="#tab-E" role="tab" aria-controls="tab-E" aria-selected="false">Short E</a>
        </div>

        <div id="tab-content" class="col-9 tab-content">
            <div id="tab-A" class="tab-pane fade show active" role="tabpanel" aria-labelledby="pill-A">[A]</div>
            <div id="tab-B" class="tab-pane fade" role="tabpanel" aria-labelledby="pill-B">[B]</div>
            <div id="tab-C" class="tab-pane fade" role="tabpanel" aria-labelledby="pill-C">[C]</div>
            <div id="tab-D" class="tab-pane fade" role="tabpanel" aria-labelledby="pill-D">[D]</div>
            <div id="tab-E" class="tab-pane fade" role="tabpanel" aria-labelledby="pill-E">[E]</div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

所以在这种情况下我不会使用 .flex-column，而是使用 .col 类来设置药丸的宽度。正如您在 css 部分中看到的那样，.col 在 #tab-sidebar 选择器下略有改变，以考虑 pill 之间的边距。