仅在 bootstrap 导航栏菜单上将特定 text/button 居中

Question

我有一个使用 Boostrap 3 的实用 narbar 菜单。

我想更改 'sign in' 和 'sign up button' 的位置，它们现在位于 菜单中心的右侧（水平方向）。

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

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

代码如下：

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.

仅在 bootstrap 导航栏菜单上将特定 text/button 居中

Center only specific text/button on bootstrap " navbar menu

html

css

twitter-bootstrap

twitter-bootstrap-3