Używam Bootstrap, aby stworzyć responsywną nawigację i używam jednej z ikon, które zapewnia tworzenie menu Pokaż / Ukryj. Problem polega na tym, że wyświetla strzałkę na innej linii. Czy istnieje sposób wyświetlania strzałki obok tekstu w jednej linii?
Oto demo: http://jsfiddle.net/0l6g87H2/
Oto kod, który towarzyszy to skrzypce, aby ten samodzielny:
<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-->
2
Ricardo
18 sierpień 2014, 19:03
3 odpowiedzi
Najlepsza odpowiedź
Możesz owinąć dwa elementy w rozpiętości i ustawić rozpiętość do wyświetlenia: wbudowany lub wniszkowy.
<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>
http://jsfiddle.net/0l6g87H2/2/
2
Daniel Sanchez
18 sierpień 2014, 15:16
Możesz dołączyć ikonę span
w elemencie a
. Zaktualizowane skrzypce
<a href="">
<strong>Cars</strong>
<span class="glyphicon glyphicon-circle-arrow-right"></span
</a>
pull-left
pull-right
Zaktualizowany skrzypce
<a href="" class="pull-left">
<strong>Cars</strong>
</a>
<a href="" class="pull-right">
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
3
im_brian_d
18 sierpień 2014, 15:58
Spróbuj tego...
<a href="#">
<span class="glyphicon glyphicon-chevron-right"></span> Demo
</a>
1
Leo Leoncio
18 sierpień 2014, 15:12