ナビピルの配置

Question

私は、ブートストラップ4フレームワークでサイドバーメニューを作成したいと思います。デフォルトのnav-pillsを利用すると、同じ行に2つの錠剤をどのように配置できますか？

デフォルトのコードの下に見つけてください：

<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セクションで見ることができるように、は、#tab-sidebarセレクターの下で若干変更されており、丸薬の間のマージンを考慮しています。