导航丸定位 [英] Nav-pill Positioning

问题描述

我想用Bootstrap 4框架创建一个侧栏菜单。利用他们的默认 nav-pills 我如何在同一行上放置两个药片？

I would like to create a side-bar menu with the Bootstrap 4 framework. Utilizing their default nav-pills how can I position two pills on the same row?

请在下面找到默认值代码：

Please find below the default code:

<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>

推荐答案

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

Implementation details may vary but I would approach this with something like below.

#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 选择器下略有改变，为了将药片之间的边距考虑在内。

So I won't use .flex-column in this case, but would rather set the widths of the pills with .col classes. As you can see in the css section, the .cols are slightly altered under the #tab-sidebar selector, in order to take margins between pills into account.

这篇关于导航丸定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！