Twitter Boostrap - Căn chỉnh nhãn theo chiều ngang để thả xuống

Question

Tôi muốn có nhãn cho menu thả xuống bên cạnh trình đơn thả xuống.

tìm thấy bên dưới như thế nào ví dụ hiện tại của tôi trông giống như:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<ul class="nav nav-pills" role="tablist"> 
 
    <li role="presentation">Order: </li> 
 
    <li role="presentation" class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ticker<span class="caret"></span></a> 
 
    <ul class="dropdown-menu" id="menu1" aria-labelledby="drop4"> 
 
     <li> 
 
     <a href="#">Action</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Another action</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Something else here</a> 
 
     </li> 
 
     <li role="separator" class="divider"></li> 
 
     <li> 
 
     <a href="#">Separated link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Bất kỳ lời đề nghị làm thế nào để sắp xếp các nhãn với menu thả xuống đúng?

Thx trước!

Answer 1

Tôi không chắc mình hiểu chính xác, nhưng để căn chỉnh, tôi sẽ sử dụng flexbox.

.nav-pills { 
 
    display: flex; 
 
    align-items: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<ul class="nav nav-pills" role="tablist"> 
 
    <li role="presentation">Order: </li> 
 
    <li role="presentation" class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
 
          Ticker 
 
           <span class="caret"></span> 
 
          </a> 
 
    <ul class="dropdown-menu" id="menu1" aria-labelledby="drop4"> 
 
     <li> 
 
     <a href="#">Action</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Another action</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Something else here</a> 
 
     </li> 
 
     <li role="separator" class="divider"></li> 
 
     <li> 
 
     <a href="#">Separated link</a> 
 
     </li> 
 
    </ul> 
 
    </li>

Answer 2

Bạn chỉ có thể thêm đệm như thế này:

/* Optional theme */ 
 

 
@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
ul.nav > li:first-child { 
 
padding:10px 5px; 
 
}

<ul class="nav nav-pills" role="tablist"> 
 
    <li role="presentation" >Order: </li> 
 
    <li role="presentation" class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
 
          Ticker 
 
           <span class="caret"></span> 
 
          </a> 
 
    <ul class="dropdown-menu" id="menu1" aria-labelledby="drop4"> 
 
     <li> 
 
     <a href="#">Action</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Another action</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Something else here</a> 
 
     </li> 
 
     <li role="separator" class="divider"></li> 
 
     <li> 
 
     <a href="#">Separated link</a> 
 
     </li> 
 
    </ul> 
 
    </li>

Answer 3

Sử dụng Flex để NAV thuốc

.nav-pills{ 
display:flex; 
align-items:center; 
} 

JS Fiddle: https://jsfiddle.net/pradeep0594/qfwngj5x/1/ để bạn tham khảo

Answer 4

Chỉ cần thêm dưới đây css trong file css tùy chỉnh của bạn

.nav-pills>li:not(.dropdown) { 
    padding: 10px 12px; 
} 

.nav-pills>li:not(.dropdown) { 
 
    padding: 10px 12px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<ul class="nav nav-pills" role="tablist"> 
 
    <li role="presentation">Order: </li> 
 
    <li role="presentation" class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ticker<span class="caret"></span></a> 
 
    <ul class="dropdown-menu" id="menu1" aria-labelledby="drop4"> 
 
     <li> 
 
     <a href="#">Action</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Another action</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Something else here</a> 
 
     </li> 
 
     <li role="separator" class="divider"></li> 
 
     <li> 
 
     <a href="#">Separated link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 5

Tôi thích giải pháp display: flex Gerard của tốt hơn, nhưng chỉ trong trường hợp bất kỳ ai thích duy trì thuộc tính hiển thị ban đầu, dưới đây là ví dụ chỉ sử dụng line-height để theo chiều dọc trung tâm cả hai .nav-pills.

<style> 
 
    .nav-pills > li { 
 
     line-height: 40px; 
 
    } 
 
    .nav.nav-pills > li > a { 
 
     /* removes top & bottom padding */ 
 
     padding: 0 15px; 
 
    } 
 
</style> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<ul class="nav nav-pills" role="tablist"> 
 
    <li role="presentation">Order: </li> 
 
    <li role="presentation" class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ticker<span class="caret"></span></a> 
 
    <ul class="dropdown-menu" id="menu1" aria-labelledby="drop4"> 
 
     <li> 
 
     <a href="#">Action</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Another action</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Something else here</a> 
 
     </li> 
 
     <li role="separator" class="divider"></li> 
 
     <li> 
 
     <a href="#">Separated link</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>