Bootstrap horizontal dropdown-menu?
20,213
Your Problem solved Horizontal List
html
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Drop it</button>
<ul class="dropdown-menu" role="menu">
<li> <a href="http://google.com">Google</a>
</li>
<li> <a href="http://facebook.com">Facebook</a>
</li>
</ul>
</div>
css
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.dropdown-menu > li {
display: inline-block;
float:left;
}
.open > ul {
display: inline-flex !important;
}
Author by
John
Updated on July 29, 2020Comments
-
John almost 4 years
I'd like a bootstrap dropdown menu where the links are horizontal. Unfortunately, I'm having trouble with getting the width correct. The only way I can seem to make it happen is set the min-width to some arbitrary number. I'd like to do this responsively.
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); .dropdown-menu>li>a { display: inline; } .dropdown-menu { min-width: 500px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Drop it </button> <ul class="dropdown-menu" role="menu"> <li> <a href="http://google.com">Google</a> <a href="http://facebook.com">Facebook</a> </li> </ul> </div>
-
Suresh Karia almost 10 yearsHappy to help :D Peace
-
Pahomi about 7 yearsWorked nice in Chrome and Firefox but not in IE. I found another solution here stackoverflow.com/questions/18616040/… Look for migli answer. Anyway thanks Eirenaios!
-
Suresh Karia about 7 years@Pahomi okay thanks for the link i will look in to it!
-
Pahomi about 7 years@eirenaios the problem in IE browser was the background color for dropzone.