这是我简单的导航栏:
<div class="navbar navbar-fixed-top myfont" role="navigation">
<div class="">
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#">
<img src="assets/img/logo.png"/>
</a>
</li>
<li>
<button class="btn btn-navbar">
<i class="fa fa-edit"></i>
Create
</button>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<li data-match-route="/"><a href="#/page-one">Login</a></li>
<li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
</ul>
</div>
我只是想防止这种情况崩溃,因为我不需要它,怎么办?
我想避免编写30万行CSS来覆盖默认样式。
有什么建议吗?
经过仔细检查,没有30万行,但是您需要覆盖大约3-4个CSS属性:
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
这样,您的菜单就不会折叠。
说明
四个CSS属性分别执行以下操作:
.collapse
引导程序中的默认属性隐藏平板电脑(风景)和电话的菜单的右侧,而是显示一个切换按钮以隐藏/显示它。因此,此属性将覆盖默认值并持久显示这些元素。
为了使右侧菜单与左侧出现在同一行上,我们需要左侧向左浮动。
默认情况下,此属性在引导程序中存在,但在平板电脑(纵向)上不存在此分辨率。您可以跳过这一步,这很可能不会影响您的整体导航栏。
这将使右侧菜单保持在右侧,而内部元素(li
)将跟随属性2。因此,我们将左侧浮动和右侧浮动向右移到了一行。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句