내비게이션 알약 위치 지정

Question

부트 스트랩 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 섹션에서 볼 수 있듯이 은 약 사이 여백을 고려하여 #tab-sidebar 선택기 아래 약간 변경됩니다.