javascript - Trying to display a link text and a link icon on the same line -
i'm using bootstrap create responsive navigation, , i'm using 1 of icons bootstrap provides create show/hide menu. problem is displaying arrow on different line. there way display arrow next text on 1 line?
here demo: http://jsfiddle.net/0l6g87h2/
here's code accompanied fiddle make self contained:
<div class="container"> <div class="row"> <div class="col-sm-3 col-md-3 col-lg-2"> <div class="sidebar-nav"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <span class="visible-xs navbar-brand">left navigation</span> </div><!--/.navbar-header --> <div class="navbar-collapse collapse sidebar-navbar-collapse"> <nav id="leftnav" role="navigation" aria-label="left navigation"> <!-- templatebegineditable name="left navigation" --> <ul class="nav navbar-nav"> <li><a href="#.html">home</a></li> <li><a href="#"><strong>cars</strong></a> <a href="#elp" class="expander" ><span class="glyphicon glyphicon-circle-arrow-right"></span></a> <ul id="elp"> <li><a href="#">bmw</a></li> <li><a href="#">honda</a></li> <li><a href="#">toyota</a></li> </ul> </li> </ul> </nav> <!-- /left navigation --> </div> <!--/.nav-collapse --> </div> <!--/.navbar-default --> </div> <!--/.sidebar-nav --> </div> <!--/.col-sm-3 col-md-3 col-lg-2-->
you can wrap 2 elements within span , set span display:inline or inline-block.
<span style="display:inline-block;"> <a href="../gateway/index.html"><strong>cars</strong></a> <a href="#elp" class="expander" > <span class="glyphicon glyphicon-circle-arrow-right"></span> </a> </span>
Comments
Post a Comment