Question

免责声明：请原谅我在编码方面的愚蠢。我上周开始学习。

我一直在修改一个Youtube教程中的Bootstrap 3模板，我发现它可以帮助我学习HTML，CSS，最后是Java。在这个例子中，我正在努力，我试图让内联无序列表浮动到页面的右侧。我尝试将float添加到CSS中的大多数导航栏元素，但是它没有为我做任何事情。任何帮助将不胜感激。

HTML：

        <div class="navbar navbar-fixed-top">
            <div class="container">

                <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>

                <div class="nav-collapse collapse navbar-responsive-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">Home</a>
                        </li>

                        <li class="inactive">
                            <a href="#">Photos</a>
                        </li>

                        <li class="inactive">
                            <a href="#">Videos</a>
                        </li>

                        <li class="inactive">
                            <a href="#">Contact Us</a>
                        </li>

                    </ul>
                </div><!-- end nav-collapse -->

            </div><!-- end container -->
        </div><!-- end navbar -->

CSS：

.navbar {
  position: relative;
  min-height: 50px;
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 20px;
  background-color: #eeeeee;
  border-radius: 4px;
  }

.navbar:before,
.navbar:after {
 display: table;
 content: " ";
 }

.navbar:after {
 clear: both;
 }

.navbar:before,
.navbar:after {
 display: table;
 content: " ";
 }

.navbar:after {
 clear: both;
 }

.navbar-nav {
 margin-top: 10px;
 margin-bottom: 15px;
 }

.navbar-nav > li > a {
 padding-top: 15px;
 padding-bottom: 15px;
 line-height: 20px;
 color: #777777;
 border-radius: 4px;
 }

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
 color: #333333;
 background-color: transparent;
 }

.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
 color: #555555;
 background-color: #d5d5d5;
 }

.navbar-nav > .disabled > a,
.navbar-nav > .disabled > a:hover,
.navbar-nav > .disabled > a:focus {
 color: #cccccc;
 background-color: transparent;
 }

.navbar-nav.pull-right {
 width: 100%;
 }

.navbar-static-top {
 border-radius: 0;
 }

.navbar-fixed-top,
.navbar-fixed-bottom {
 position: fixed;
 right: 0;
 left: 0;
 z-index: 1030;
 border-radius: 0;
 }

.navbar-fixed-top {
 top: 0;
 }

.navbar-fixed-bottom {
 bottom: 0;
 margin-bottom: 0;
 }

.navbar-brand {
 display: block;
 max-width: 200px;
 padding: 15px 15px;
 margin-right: auto;
 margin-left: auto;
 font-size: 18px;
 font-weight: 500;
 line-height: 20px;
 color: #777777;
 text-align: center;
 }

.navbar-brand:hover,
.navbar-brand:focus {
 color: #5e5e5e;
 text-decoration: none;
 background-color: transparent;
 }

.navbar-toggle {
 position: absolute;
 top: 9px;
 right: 10px;
 width: 48px;
 height: 32px;
 padding: 8px 12px;
 background-color: transparent;
 border: 1px solid #dddddd;
 border-radius: 4px;
 }

.navbar-toggle:hover,
.navbar-toggle:focus {
 background-color: #dddddd;
 }

.navbar-toggle .icon-bar {
 display: block;
 width: 22px;
 height: 2px;
 background-color: #cccccc;
 border-radius: 1px;
 }

.navbar-toggle .icon-bar + .icon-bar {
 margin-top: 4px;
 }

Answer 1

当您使用Bootstrap时，您可以使用类.pull-right将其对齐。

了解详情 click here 。

Answer 2

在Bootstrap v 3。**中，最好使用＆＃34; navbar-right＆＃34;所以适当的背景应该是：

ul class =＆＃34; nav navbar-nav navbar-right＆＃34;

Answer 3

如果您使用的是bootstrap 3，请使用navbar-right向右拉

jsfiddle.net/makk/9yxeg7r5/2 - 这是一个类似的例子

    <div id="top"></div>
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="row">
            <div class="navbar-header">


                <a class="navbar-brand" href="#top"><span class="fa fa-book fa-3x">MATH</span></a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#top">Home</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Courses</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact</a></li>

            </ul>
        </div>
        </div>
    </div>

将ul修复到bootstrap导航栏的右侧

3 个答案: