Question

我正在尝试将我的Bootstrap导航中的特定链接集中在一起。

我的代码：

<nav class="navbar navbar-default user_info_bar" role="navigation">
  <div class="collapse navbar-collapse">

    <ul class="nav navbar-nav">
      <li>
        <p class="navbar-text"><%= @user.screens.count %> Screenshots</p>
      </li>
      <li>
        <p class="navbar-text"><%= @user.points %> Points</p>
      </li>
    </ul>

    <ul class="nav navbar-nav"> <!-- This must be in the middle -->
      <li class="user_follow">
        <%= link_to "Follow", follow_user_path %>
      </li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li>
        <p class="navbar-text"><%= @user.follow_count %> Following</p>
      </li>

      <li>
        <p class="navbar-text"><%= @user.followers.count %> Followers</p>
      </li>
    </ul>

  </div>
</nav>

http://bootply.com/107875

现在我左侧和右侧有2个按钮。我正试图将“跟随”按钮完全置于中心位置。

Answer 1

<ul class="nav navbar-nav centerContainer"> <!-- This must be in the middle -->
  <li class="user_follow">  
     <%= link_to "Follow", follow_user_path %>
  </li>
</ul>

<强> CSS

.centerContainer {
  position: absolute;
  left: 50%;
}

http://bootply.com/107882

Answer 2

然后试试这个：

.navbar-collapse {
    position: relative;
}        
.nav-middle {
    position: absolute;
    left: 50%;
    margin-left: -34px; /* Half the width of your button
}

您必须向中间nav-middle添加课程ul，并且您需要调整样式以移除按钮旁边的左边框。

在Bootstrap Nav中居中一项

2 个答案: