我試圖在自舉導航欄中使用navbar-btn,但是使它們恢復爲移動視圖上的正常鏈接。切換移動菜單上的自舉navbar-btn格式化
我已經使用visible- *類來替換「標準」導航項的按鈕,但我無法正確格式化摺疊下拉菜單。這是填充,我無法在visible-xs div中的兩個鏈接上工作,並且假設它是導致問題的類。
我已經試過以下(以及許多其他的我刪除)格式化菜單,但沒有對所有環節的工作:
.navbar-fixed-top > .navbar-collapse > .navbar-nav > li > a {padding: 10px 0;}
.navbar-collapse.collapse.in > ul > li > a {padding: 10px 0;}
我也嘗試添加類的鏈接:
.navbar-collapse.collapsing > ul > li > a.toggled {padding: 10px 0;}
.navbar-collapse.collapse.in > ul > li > a.toggled {padding: 10px 0;}
我也曾嘗試可見-XS-inline-block的和塊但這並沒有區別要麼
<div id="fixed-top" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
<a class="navbar-brand" href="#">logo</a>
</div>
<div class="collapse navbar-collapse">
<!-- buttons visible on full-size screen only -->
<div class="visible-lg visible-md">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group">
<a class="toggled" href="#"><button type="button" class="btn navbar-btn nav-button active">login</button></a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn navbar-btn nav-button" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">my templates <span class="caret"></span></button>
<ul class="dropdown-menu inverse-dropdown">
<li><a class="toggled" href="#">template 1</a></li>
<li><a class="toggled" href="#">template 2</a></li>
<li><a class="toggled" href="#">template 3</a></li>
</ul>
</li>
</ul>
</div>
<ul class="nav navbar-nav">
<!-- non-button menu on small screen only -->
<div class="visible-sm visible-xs">
<li class="active"><a class="toggled" href="login.php">login</a></li>
<li class="dropdown">
<a class="toggled" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">my templates <span class="caret"></span>
</a>
<ul class="dropdown-menu inverse-dropdown">
<li><a class="toggled" href="#">template 1</a></li>
<li><a class="toggled" href="#">template 2</a></li>
<li><a class="toggled" href="#">template 3</a></li>
</ul>
</li>
</div>
<!-- visible on all sizes -->
<li><a class="toggled" href="index.php">home</a></li>
<li><a class="toggled" href="#">link 1</a></li>
<li><a class="toggled" href="#">link 2</a></li>
<li class="dropdown">
<a class="toggled" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">dropdown<span class="caret"></span>
</a>
<ul class="dropdown-menu inverse-dropdown">
<li><a class="toggled" href="#">link drop 1</a></li>
<li><a class="toggled" href="#">link drop 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
我不會在這裏發佈CSS,但我已經在這裏:http://www.bootply.com/C0GXvXToTE#
也許有一種更容易的方式來實現我想要的東西,我失蹤了。我更喜歡沒有JavaScript。
關於如何在摺疊的所有鏈接上添加填充的任何想法?
「所有鏈接」是什麼意思?我懷疑你只是想添加填充(並且看起來像只是「左填充」)到2個鏈接的「登錄」和「我的模板」。 – Hopeless