2017-12-17 95 views
9

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

खोजें:

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

उत्तर

6

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

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

+0

महान जवाब है, निश्चित रूप से अपने वोट हो जाता है। यदि आप सामग्री को केंद्र में नहीं रखना चाहते हैं तो एक अन्य विकल्प 'संरेखण-वस्तुएं: आधारभूत'' है। यहां मूल मुद्दा यह है कि आप एक ऐसे आइटम को संरेखित करने का प्रयास कर रहे हैं जिसमें कोई अन्य लंबवत पैडिंग नहीं है जिसमें बहुत सारे पैडिंग हैं। फ्लेक्सबॉक्स इस तरह की स्थितियों को संभालने का सबसे अच्छा तरीका है। – dmbaughman

3

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

/* 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>
फ्लेक्स

+0

यह निश्चित रूप से सभी सिफारिशों में से सबसे सरल समाधान है। – doppl3r

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>

1

मैं जेरार्ड के 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>

संबंधित मुद्दे