[英]Bootstrap 3 Navbar elements not aligned properly
當我在本地運行網站時,元素正確對齊。 這是預期的結果:
但是,在“我的網頁”上 ,元素向左對齊。
我已經嘗試過了,但是還是一樣。 我不明白的是為什么它在我的本地計算機上而不在服務器上工作? 我該如何解決?
相關的HTML代碼:
<section id="header" class="appear">
<div class="navbar navbar-fixed-top" role="navigation" data-0="line-height:100px; height:100px; background-color:rgba(0,0,0,0.3);" data-300="line-height:60px; height:60px; background-color:rgba(0,0,0,1);">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="fa fa-bars color-white"></span>
</button>
<h1><a class="navbar-brand" href="index.html" data-0="line-height:90px;" data-300="line-height:50px;" style="font-family: 'Cuprum', sans-serif;"> Kaushaya </a>
</h1>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav right-to-left" data-0="margin-top:20px;" data-300="margin-top:5px;">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#section-about" >About</a></li>
<li><a href="#testimonials">Work</a></li>
<li><a href="#section-skills">Skills</a></li>
<li><a href="#section-contact">Contact</a></li>
<li><a target="_blank" href="http://www.webparadiso.wordpress.com">Blog</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
</section>
嘗試使用float: right;
在.nav
和.navbar
。
要進行垂直的其他調整,可以使用clear: both;
在.nav
。 如果仍然不執行任何操作,請在float語句的末尾添加!important
。 一個簡單的CSS解決方案來解決您的問題!
希望這可以幫助!
您可以只使用twitter bootstraps導航類將其拉到右側。
<ul class="nav navbar-nav navbar-right">
您可以在引導站點http://getbootstrap.com/components/#navbar-default上看到示例
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.