Bootstrap 导航栏按钮 - 居中定位答案

【问题标题】：Bootstrap navbar button - center positioningBootstrap 导航栏按钮 - 居中定位
【发布时间】：2015-04-01 04:53:57
【问题描述】：

我正在尝试将要放置在模态中的按钮居中。添加到按钮的正确类“nav-justified”（如果使用）会占据导航栏的整个宽度并推动除品牌之外的所有其他元素。我希望对此有一个类解决方案，但也许我只需要用 css 覆盖。任何人都可以帮我实现这一目标吗？这是我的 html 的相关部分：

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/posts">JBK</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
        <%= link_to 'New post', new_post_path, class: 'btn btn-primary navbar-btn navbar-left' %>
        <% if user_signed_in? %>
          <%= link_to('Logout', destroy_user_session_path, :method => :delete,
        class: 'btn btn-primary navbar-btn navbar-right') %>
          <%= link_to('Edit registration', edit_user_registration_path,
        class: 'btn btn-primary navbar-btn navbar-right') %>
        <% else %>
          <%= form_for(User.new, as: :user, url: session_path(:user),
        html: { class: 'navbar-form navbar-right' }) do |f| %>
            <div class="form-group">
              <%= f.email_field :email, placeholder: 'Email',
            class: 'form-control' %>
             </div>
            <div class="form-group">
              <%= f.password_field :password, placeholder: 'Password',
            class: 'form-control' %>
            </div>
            <%= f.button "Sign in", class: 'btn btn-success' %>  
          <% end %>
        <% end %>
        </div>
      </div>
    </nav>        
    <%= yield %>
    <div class="container">
      <footer>
        <p>&copy; Bibble 2015</p>
      </footer>
    </div>
  </body>

谢谢。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

Fiddle

来自这个答案：Simular question
评论：@pbadeer nav-justified 用于药丸和标签，而不是导航栏。警告：在导航栏上使用此类会破坏导航栏样式。

我将 ruby 翻译成纯 html（因为我不知道或不熟悉 ruby-on-rails）
添加了<div class="text-center">（我希望按钮是正确的）并将该按钮包裹在<span>

【讨论】：

【解决方案2】：

尝试添加：

-<div class= "text-center">

它会为你完成这项工作。

【讨论】：

感谢 Persijn 和 nr.Varun。编写 jsFiddle Persijn 做得很好，我第一次看到 jsFiddle 和演示代码部分的非常好的方法，v 很有帮助。当添加到包含整个导航栏的树上的父 div 之一时，添加 text-center 类确实有效，并且将“navbar-right”类添加到我不想坐在中心的单个按钮元素中。两个答案都是正确的，但是我只能将一个标记为“答案”，所以我会标记 Persijn，因为它是第一个发布的。再次感谢你让我摆脱了奇怪的 css/html/class'ie 漏洞！！