时间戳

首页 > 解决方案 > 选项卡内的引导网格

html - 选项卡内的引导网格

问题描述

试图让它工作，但由于某种原因，我在标签内的所有格式都搞砸了。

<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<%= javascript_tag do %>
     google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawSeriesChart);

    function drawSeriesChart() {

      var data = google.visualization.arrayToDataTable($('.temp_information').data('temp'));

      var options = {
        title: 'name',
        bubble: {textStyle: {fontSize: 11}},
        explorer: { keepInBounds: true }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
      chart.draw(data, options);
    }
<% end %>

<div class="container-fluid">

  <div class="row">
    <div class="col-6"><h1>Title</h1></div>
  </div>
  <div class="row">
    <div class="col-6"><h3><%= link_to 'Go to Database', controller: 'articles' %></h3></div>
  </div>
  <div class="row">
    <div class="col-6">
      <%= form_tag articles_path, :enforce_utf8 => false, :method => 'get', :class => 'form-inline'  do %>
        <div class="form-group">
          <h5>Search Database:</h5>
          <%= text_field_tag :search, params[:search], class: 'form-control input-sm' %>
        </div>
        <div class="form-group">
          <%= submit_tag "Search", :name => nil, class: 'btn btn-primary btn-sm' %>
        </div>
      <% end %>
    </div>
  </div>



  <nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
      <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
      <a class="nav-item nav-link" id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-profile" aria-selected="false">Second</a>
      <a class="nav-item nav-link" id="nav-third-tab" data-toggle="tab" href="#nav-third" role="tab" aria-controls="nav-contact" aria-selected="false">Third</a>
    </div>
  </nav>


  <div class="tab-content" id="nav-tabContent">

    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

      <div class="row">
        <div class="col-12">
          <%= form_tag root_path, :enforce_utf8 => false, :method => 'get' do  %>
            <h5>Build a graph:</h5>
            <%= text_field_tag :search2, params[:search2], id: "keywords", data: { role: 'tagsinput'} %>
            <%= javascript_tag do %>
              TagsInput('#keywords', "<%= root_url %>keywords.json")
            <% end %>
            <%= submit_tag :Submit, class: 'btn btn-primary btn-sm' %>
          <% end %>
          <%= @keywordslst %>
          <br>

          <%= content_tag :div, class: "temp_information", data: {temp: @graph} do %><% end %>
        </div>
      </div>
      <div class="row">
        <div class="col-12"><div id="series_chart_div" style="width: 100%; height: 800px;"></div></div>
      </div>

    </div>
    <div class="tab-pane fade" id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab">

      <div class="row">
        <div class="col-12"><h4>Total texts<h4></div>
        <div class="col-12"><%= line_chart @articles.group_by_month(:date, last: 6).count.map { |x,y| { x => (@sume += y)}}.reduce({}, :merge), curve: false %></div>
      </div>
      <div class="row">
        <div class="col-12"><h5>Texts spread by subject (monthly slice)<h5></div>
        <div class="col-12"><%= column_chart @articles.group(:category).group_by_month(:date, last: 6).count, stacked: true %></div>
      </div>
      <div class="row">
        <div class="col-12"><h4>Total entries by category (total)</h4></div>
        <div class="col-12"><%= pie_chart @articles.group(:category).count, legend: "right" %></div>
      </div>

    </div>    
  </div>
</div>

“第二”选项卡内的所有内容都会缩小到大约col-1或的大小col-2。有关如何解决此问题并使网格在选项卡内工作的任何想法？bootstrap.min.js也不包括在这里，因为它已经在资产中（这是 ruby​​ on rails，但我怀疑问题与 rails 有关）。

标签： htmlbootstrap-4

解决方案

您的第二个导航项的 href 属性与您的第二个选项卡窗格的 ID 不匹配：

<a class="nav-item nav-link" id="nav-second-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Second</a>

<div class="tab-pane fade" id="nav-second" role="tabpanel" aria-labelledby="nav-profile-tab">

尝试这个：

<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Second</a>

<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">

而且您缺少第三个选项卡窗格。

推荐阅读