Geek Answers Handbook

Bootstrap popup menu Two links on one horizontal line

I use Bootstrap to create dropdown menus. One option that I would like to have is two links in the same horizontal line in the drop-down menu. How can i achieve this?

<div class = "navbar"> <div class = "navbar-inner"> <li class = "dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown Button <b class="caret"></b> </a> <ul class = "dropdown-menu" role="menu" > <li><a href="#">On First Row</a></li> <li><a href="#">On Second Row</a></li> <li><a href="#">On Third Row</a><a href="#">Also On Third Row</a></li> </ul> </li> </div> </div>
+6
source share
2 answers

Your solvable code here → → →> two links in one drop-down list

HTML

  <div class="navbar"> <div class="navbar-inner"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown Button <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu"> <li><a href="#">On First Row</a> </li> <li><a href="#">On Second Row</a> </li> <li class="hz"><a href="#">On Third Row</a><a href="#">Also On Third Row</a> </li> </ul> </li> </div> </div>

CSS

 .open> ul>li.hz{ display: inline-flex !important; }
+5
source

Problem with eirenaios answer:

When the drop-down menu is contained in a collapsible navigation bar, several <li> lines will be displayed on one line (until it is transferred to the next line) when the navigation bar is minimized. It looks very ugly and confusing.

Here is a solution based on eirenaios answer, but it also works for switchable (collapsible) navigators with drop-down menus:

https://plnkr.co/edit/JnsvKGiBokrI1frxC11P?p=preview

EDIT:

Extra CSS rule:

 .open > .dropdown-menu { display: table-caption; }

HTML (basically the same as the original, but surrounded by .navbar-collapse and added .navbar-header with a hamburger menu button to open a minimized menu):

 <nav class="navbar navbar-default"> <div class="navbar-header" data-toggle="collapse" data-target="#navbar0"> <button type="button" class="navbar-toggle"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> </div> <!-- toggled content --> <div class="collapse navbar-collapse" id="navbar0"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Menu A <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="hz"> <a href="#">Item A1 left</a> <a href="#">Item A1 right</a> </li> <li class="hz"> <a href="#">Item A2 left</a> <a href="#">Item A2 right</a> </li> <li> <a href="#">Single item A3</a> </li> <li class="hz"> <a href="#">Item A3 left</a> <a href="#">Item A3 right</a> </li> </ul> </li> </ul> </div> </nav>
+1
source

More articles:


All Articles