ट्विटर बूस्ट्रैप - ड्रॉपडाउन

Question

पर क्षैतिज लेबल संरेखित करें मैं ड्रॉपडाउन मेनू के बगल में ड्रॉपडाउन के लिए लेबल रखना चाहता हूं। कैसे मेरे वर्तमान उदाहरण की तरह लग रहा नीचे

खोजें:

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

कोई सुझाव कैसे लटकती ठीक से साथ लेबल संरेखित करने के लिए?

अग्रिम में Thx!

Answer 1

मुझे यकीन नहीं है कि मैं सही ढंग से समझता हूं, लेकिन संरेखण के लिए मैं एक फ्लेक्सबॉक्स का उपयोग करूंगा।

.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

आप बस इस तरह गद्दी जोड़ सकते हैं:

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

उपयोग की गोलियाँ

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

NAV के

जे एस बेला: आपके संदर्भ के लिए https://jsfiddle.net/pradeep0594/qfwngj5x/1/

Answer 4

बस अपने कस्टम सीएसएस फ़ाइल में सीएसएस नीचे जोड़ने

.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

मैं जेरार्ड के display: flex समाधान बेहतर पसंद है, लेकिन सिर्फ में अगर कोई मूल डिस्प्ले प्रॉपर्टी को बनाए रखने के लिए पसंद करता है, तो यहां एक उदाहरण है जो केवल line-height का उपयोग करके लंबवत केंद्र दोनों 01 पर केंद्रित है।।

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