Question

嘿伙计们我基本上是css的新手并试图建立一个自举导航栏，问题是我必须将导航栏的某些内容集中在中心.E，将菜单项置于中心位置。

基本上经过引导导航栏的源后，我发现导航栏中的所有元素都出现在一行而不是继续下一行的原因是因为导航栏中的元素向右或向左浮动，移除浮动的移动，对齐被破坏，

所以我试图做的是： - HTML代码（TYPICAL bootstrap markup）：

<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

中的花车

小提琴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>

浮动到下一行。无论如何我可以将内容重新插入菜单项吗？

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

谢谢。

亚历-Z。

Answer 1

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

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

而不是为FB徽标保留另一个UL，而是将整个Li保留为第一个UI本身并且向右对齐，应该有帮助

所以最终的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

希望这有帮助。

谢谢，腓利门书

从bootstrap导航栏中删除浮动而不影响布局

1 个答案: