I would like to have the label for the dropdown next to the dropdown menus.
Find below how my current example looks like:
<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>Any suggestions how to align the label with the dropdown properly?
Thx in advance!
5 Answers
Answers 1
I'm not sure I understand correctly, but for alignment I would use a 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>Answers 2
Just add the below css in your custom css file
.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>Answers 3
You can simply add padding like this :
/* 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>Answers 4
Use Flex to nav pills
.nav-pills{ display:flex; align-items:center; } JS FIDDLE: https://jsfiddle.net/pradeep0594/qfwngj5x/1/ for your reference
Answers 5
I like Gerard's display: flex solution better, but just in case anyone prefers to maintain the original display property, here is an example using only line-height to vertically center both .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>
0 comments:
Post a Comment