Question

我目前正在遇到引导问题，试图使我的引导选项卡执行三项操作。

将标签页居中放在页面中心。
立即显示我团队的内容。
具有选项卡，表格内容占据了屏幕的大部分。

以下是我的问题的图片：

在点击团队之前

点击团队后

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

<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 / 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”类添加到容器中

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

如果需要以编程方式复制状态，则可以使用.active强制显示活动状态（并包括aria-pressed =“ true”属性）。另外，我删除了“选定的咏叹调”，您可以在这里了解原因：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>

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

1 个答案: