html - 仅在 Bootstrap “导航栏菜单”上居中特定文本/按钮

Question

我有一个使用 Boostrap 3 的功能性 narbar 菜单。

我想将此处“登录”和“注册按钮”的位置更改为菜单中心(水平方向)的右侧。

我已经阅读了很多 SO 帖子，但它们通常只解释了如何将标题的所有元素全局居中，或者我没有设法将他们所说的应用到我的具体案例中。

你能告诉我要在下面的代码中更改什么才能使它正常工作吗？

代码如下:

html

<header>
        <div class = "navbar navbar-default navbar-fixed-top">
        <div class = "container">
            <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

            <a class="navbar-brand" href="/">My App</a>

      </div>

            <div class="navbar-collapse collapse">
                <nav role="navigation">
                    <!-- Navigation with change according to user role -->

                    <ul class="nav navbar-nav navbar-right">

                      <!--  Links for signed-in users -->
                        <li class="non-btn-menu">
                          <a href="/signin">login</a>
                        </li>
                        <li>
                            <a class="framed" href="/signup">Sign up Free</a>
                        </li>

                      <li class="non-btn-menu hidden-xs"><a href="/about">Cool, you need explanations?</a></li>

                      <li class="non-btn-menu visible-xs"><a href="/about">test</a></li>                 

                      <li class="dropdown non-btn-menu" id="fat-menu">
                        <a href="javascript:void(0)" class="dropdown-toggle hidden-xs" data-toggle="dropdown">
                          <i class="fa fa-bars fa-lg"></i> 
                        </a>
                        <ul class="dropdown-menu">
                          <li role="presentation" class="dropdown-header">About Us</li>
                          <li><a href="#">Team</a></li>        
                          <li><a href="#">Press</a></li>  

                        </ul>
                      </li>

                    </ul>

                </nav>
            </div><!--/.nav-collapse -->

        </div>
    </div>
</header>

CSS:

.navbar {
  margin-bottom: 0px;
 }

.navbar-brand {
    font-size     : 2.4em;
    letter-spacing: -4px;
    padding             :   15px 45px;
    @media (max-width: 768px) {
        padding: 15px 25px;
    }
}

.navbar-nav {
  margin: 0px;
}


.navbar-default {
    background   : none repeat scroll 0 0 black;
    border-bottom: 0 none;
    filter       : none;
    padding-right: 5px;
}

.navbar-default .navbar-brand {
    color         : white;
    &:hover             { color: white;}
}

这是代码:http://www.bootply.com/3yzojgyQdj#

谢谢!

Answer 1

移除

<li class="non-btn-menu">
    <a href="/signin">login</a>
</li>
<li>
    <a class="framed" href="/signup">Sign up Free</a>
</li>

来自

<ul class="nav navbar-nav navbar-right">

然后将它们放在对齐的导航栏中，在此之前:

<ul class="nav navbar-nav navbar-justified">
    <li class="non-btn-menu">
        <a href="/signin">login</a>
    </li>
    <li>
        <a class="framed" href="/signup">Sign up Free</a>
    </li>
</ul>

LE:我将此添加到您的 CSS 中:

.navbar-collapse {
    float: right;
}
.navbar-default .container {
    text-align: center;
}
.navbar-justified {
    float: none; 
    display: inline-block;
}

Bootply .