html - 从 Bootstrap 导航栏中删除 float 而不影响布局

Question

嘿伙计们，我基本上是 css 的新手，正在尝试构建 Bootstrap 导航栏，问题是我必须将导航栏 I.E 的某些内容居中，将菜单项居中。

基本上在浏览了 Bootstrap 导航栏的源代码之后，我发现导航栏中的所有元素出现在一行而不是移动到下一行的原因是因为导航栏中的元素向右或向左浮动，你移除 float 的运动对齐被打破，

所以我尝试做的是:- HTML 代码(典型的 Bootstrap 标记):

<nav role="navigation" class="navbar navbar-default navbar-fixed">
             <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- <a href="#" class="navbar-brand">Brand</a> -->
        </div>
        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Messages</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></a></li>
            </ul>
        </div>
    </div>
</nav>

和 CSS(定制的 css):

.navbar-default .navbar-collapse  ul.navbar-nav{
    text-align: center;
    float: none;
    width: 300px;
}

.navbar-default .navbar-collapse  ul.navbar-nav li {
    float: none;
    display: inline-block;
}

.brand-holder {
    height: 200px;
    background: #000;
}


.navbar-fixed {
    position: fixed;
    width: 100%;
}

要注意的是我是如何移除 ul.navbar-nav 和 ul.navbar-nav li

中的 float 的

fiddle here . , 现在看看

的内容如何

<ul class="nav navbar-nav navbar-right">
                <li><a href="#"><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></a></li>
            </ul> 

float 到下一行。无论如何，我可以让内容与菜单项内联吗？

P.S.::我真的很想避免使用绝对定位。

谢谢。

亚历克斯-z。

Answer 1

如果我对你的问题的理解是正确的，可能通过如下更改 CSS

.navbar-default .navbar-collapse  ul.navbar-nav{
    text-align: center;
    float: none;
    text-align:left;

而不是为 FB Logo 保留另一个 UL，而是将整个 Li 保留在第一个 UL 本身中并右对齐，应该会有所帮助

所以最终的 html 将是

<nav role="navigation" class="navbar navbar-default navbar-fixed">
         <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!-- <a href="#" class="navbar-brand">Brand</a> -->       <!-- </div>-->
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Messages</a></li>
            <li style="float:right"><a href="#"><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></a></li>
        </ul>

    </div>
</div>

可以查看结果fiddle

希望这对您有所帮助。

谢谢，腓利门