如何居中，有一个活动选项卡，以及让选项卡为 Bootstrap 选项卡占用更大的屏幕宽度？

Question

我目前遇到了引导问题，我试图让引导选项卡做 3 件事。

1. 将选项卡置于页面中心。
2. 立即显示我的团队的内容。
3. 让选项卡和表格内容占据屏幕的大部分。

以下是我的问题的图片：

在点击团队之前

点击队伍后

目前，这是我的标签代码：

<div class="container tab-bar d-flex justify-content-center ">
  <ul class="nav nav-pills" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-pressed="true">
        Team</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="true">Individual</a>
    </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
          <div class="container">
            <div class="row p-2">
                   <%= render :partial => "teams_list", locals: {teams: @teams} %>
              
            </div>
          </div>
    </div>

    <div class="tab-pane" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
      <div class="container">
        <div class="row p-2">
        <%= render :partial => "users/users_list", locals: {teams: @teams} %>
        </div>
      </div>
    </div>
  </div>
</div>

_teams_list.html.erb

<% if @teams.empty? %>
  <h4>There are no teams in the system at this time.</h4>
<% else %>

  <table class="table table-hover">
    <thead>
      <tr>
        <th>Rank</th>
        <th scope="col">Team Name</th>
        <th scope="col">Points</th>
      </tr>
    </thead>

    <tbody>
      <% @teams.each do |team| %>
        <tr>
          <td>Rank</td>
          <td><%= team.name %></td>
          <td><%= team.total_points %></td>
        </tr>
      <% end %>
    </tbody>
  </table>

  <br>

  <%= link_to 'New Team', new_team_path %>

<%end%>

用户/users_list.html.erb

<% if @users.nil? %>
  <h4>There are no users in the system at this time.</h4>
<% else %>

  <table class="table table-hover">
    <thead>
      <tr>
        <th>Rank</th>
        <th scope="col">Team Name</th>
        <th scope="col">Points</th>
      </tr>
    </thead>

    <tbody>
      <% @users.each do |user| %>
        <tr>
          <td>Rank</td>
          <td><%= user.name %></td>
          <td><%= user.points %></td>
        </tr>
      <% end %>
    </tbody>
  </table>

  <br>

  <%= link_to 'New User', new_user_path %>

<%end%>

Answer 1

将“d-flex”类添加到容器中，就在 justify-content 之前

<div class="container tab-bar d-flex justify-content-center">

如果您需要以编程方式复制状态，您可以使用 .active（并包括 aria-pressed="true" 属性）强制显示活动外观。另外，我删除了“aria-selected”，您可以在此处阅读原因：https://www.stefanjudis.com/blog/aria-selected-and-when-to-use-it/。

      <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-pressed="true">
        Team</a>

一起添加代码示例：

        <div class="container tab-bar d-flex justify-content-center">
            <ul class="nav nav-pills" id="myTab" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-pressed="true">
                  Team</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="true">Individual</a>
              </li>
            </ul>
        </div>