问在不影响布局的情况下从引导导航栏中移除浮标
EN

Stack Overflow用户

提问于 2015-04-15 00:26:06

回答 1查看 1.5K关注 0票数 1

嘿，伙计们，我对css基本还是新手，我试着构建一个引导导航条，问题是我必须把导航条的某些内容集中起来，即，在菜单项中间。

基本上，在通过引导导航条的源代码之后，我发现为什么导航条中的所有元素都出现在一行中，而不是移动到下一行，因为导航条中的元素是向右或向左浮动的，您删除的元素的移动会破坏对齐，

所以我尝试做的是：- 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>
            </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中的浮点数的。

小提琴给你。，现在看看内容如何

<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。

twitter-bootstrap

html

css

回答 1

Stack Overflow用户

发布于 2015-04-15 02:23:13

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

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

与其为FB标志保留另一个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>