4

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.

enter image description here

http://jsfiddle.net/3CwzH/

@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
  • 17,550
  • 18
  • 67
  • 85
John
  • 706
  • 2
  • 10
  • 16

1 Answers1

16

I have solved your problem. View this JSFiddle for demonstration.

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;
}
TylerH
  • 20,799
  • 66
  • 75
  • 101
Suresh Karia
  • 17,550
  • 18
  • 67
  • 85
  • 1
    Worked nice in Chrome and Firefox but not in IE. I found another solution here http://stackoverflow.com/questions/18616040/bootstrap-horizontal-drop-down Look for migli answer. Anyway thanks Eirenaios! – Pahomi Feb 07 '17 at 20:48
  • @Pahomi okay thanks for the link i will look in to it! – Suresh Karia Feb 08 '17 at 05:27
  • @eirenaios the problem in IE browser was the background color for dropzone. – Pahomi Feb 08 '17 at 12:08