javascript - Bootstrap 3 导航栏元素未正确对齐

Question

当我在本地 运行我的网站时，元素正确对齐。这是预期的结果:

然而，在我的Webpage ，元素向左对齐。

我试过this但它仍然是一样的。我不明白的是为什么它在我的本地机器上工作而不是在服务器上工作？我该如何解决？

相关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>

Answer 1

尝试在 .nav 和 .navbar 上使用 float: right;。

要在垂直基础上进行额外调整，您可以在 .nav 上使用 clear: both;。如果它仍然什么都不做，请在 float 语句的末尾添加 !important。解决您问题的简单 CSS 解决方案!

希望对您有所帮助!