Таблетки bootstrap не работают в обратном порядке - PullRequest
Новая
       49

Таблетки bootstrap не работают в обратном порядке

0 голосов
/ 03 апреля 2020

Я создал макет с Bootstrap 4 таблетками. Он работает нормально при первом клике и не работает во второй раз. Предположим, если мы нажмем на menu1, menu2, menu3 в последовательности - содержимое вкладки загружается, и снова, если я нажму на menu1 - содержимое вкладки не изменится. Я сделал некоторую ошибку, но я немного запутался, чтобы достичь этого сценария. Я хочу дизайн, как показано ниже.

Может кто-нибудь, пожалуйста, исправьте мою ошибку, это большая помощь для меня. Спасибо заранее, ниже приведен мой фрагмент, пожалуйста, просмотрите мой результат в полном окне, чтобы проверить мой дизайн макета 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 mb-4">
        <div class="">
          <div class="nav nav-pills row">
            <div class="nav-item col-md-1">
              <a class="nav-lin active btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu1">Menu 1</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu2">Menu 2</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu3">Menu 3</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu4">Menu4 4</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu5">Menu 5</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu6">Menu 6</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu7">Menu 7</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu8">Menu 8</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu9">Menu 9</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu10">Menu 10</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu11">Menu 11</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu12">Menu 12</a>
            </div>
          </div>
        </div>  
      </div>  
    </div>  
    <div class="row">
      <div class="col-md-1">
        <div class="nav nav-pills">
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu13">Menu 13</a>
              </div>
            </div>  
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu14">Menu 14</a>
              </div>
            </div>  
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu15">Menu 15</a>
              </div>
            </div>  
        </div>    
      </div>
      <div class="col-md-10">
        <div class="card">
          <div class="card-body">
            <div class="tab-content">
              <div class="tab-pane container active" id="menu1">1</div>
              <div class="tab-pane container fade" id="menu2">2</div>
              <div class="tab-pane container fade" id="menu3">3</div>
              <div class="tab-pane container fade" id="menu4">4</div>
              <div class="tab-pane container fade" id="menu5">5</div>
              <div class="tab-pane container fade" id="menu6">6</div>
              <div class="tab-pane container fade" id="menu7">7</div>
              <div class="tab-pane container fade" id="menu8">8</div>
              <div class="tab-pane container fade" id="menu9">9</div>
              <div class="tab-pane container fade" id="menu10">10</div>
              <div class="tab-pane container fade" id="menu11">11</div>
              <div class="tab-pane container fade" id="menu12">12</div>
              <div class="tab-pane container fade" id="menu13">13</div>
              <div class="tab-pane container fade" id="menu14">14</div>
              <div class="tab-pane container fade" id="menu15">15</div>
              <div class="tab-pane container fade" id="menu16">16</div>
              <div class="tab-pane container fade" id="menu17">17</div>
              <div class="tab-pane container fade" id="menu18">18</div>
            </div>
          </div>  
        </div>  
      </div>
      <div class="col-md-1">
        <div class="nav nav-pills">
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu16">Menu 16</a>
              </div>
            </div>  
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu17">Menu 17</a>
              </div>
            </div>  
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu18">Menu18</a>
              </div>
            </div>  
        </div> 
      </div>  
    </div>  
  </div>

1 Ответ

1 голос
/ 03 апреля 2020

Примеры из документации показывают, что структура с .nav-item оберткой выше .nav-link работает только в тех случаях, когда nav размещен на <ul>. Если навигация создана с пользовательской структурой, вкладки / navs / pills должны быть прямыми дочерними элементами для родительского элемента .nav.

В вашем сценарии вы должны либо переопределить его, используя <ul>, либо удалить элементы div между вашим .nav и его внутренними .nav-link элементами.

У вас также есть опечатка - nav-lin должно быть nav-link. На самом деле, это не влияет на ваш макет, потому что вы добавили класс .btn к тем же элементам.

Вот ваш код с фиксированной опечаткой и удаленными элементами оболочки внутри элементов навигации: 

    <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 mb-4">
        <div class="">
          <div class="nav nav-pills row">
            <a class="nav-link active btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu1">Menu 1</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu2">Menu 2</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu3">Menu 3</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu4">Menu4 4</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu5">Menu 5</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu6">Menu 6</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu7">Menu 7</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu8">Menu 8</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu9">Menu 9</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu10">Menu 10</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu11">Menu 11</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu12">Menu 12</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-1">
        <div class="nav nav-pills">
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu13">Menu 13</a>
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu14">Menu 14</a>
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu15">Menu 15</a>
        </div>
      </div>
      <div class="col-md-10">
        <div class="card">
          <div class="card-body">
            <div class="tab-content">
              <div class="tab-pane container active" id="menu1">1</div>
              <div class="tab-pane container fade" id="menu2">2</div>
              <div class="tab-pane container fade" id="menu3">3</div>
              <div class="tab-pane container fade" id="menu4">4</div>
              <div class="tab-pane container fade" id="menu5">5</div>
              <div class="tab-pane container fade" id="menu6">6</div>
              <div class="tab-pane container fade" id="menu7">7</div>
              <div class="tab-pane container fade" id="menu8">8</div>
              <div class="tab-pane container fade" id="menu9">9</div>
              <div class="tab-pane container fade" id="menu10">10</div>
              <div class="tab-pane container fade" id="menu11">11</div>
              <div class="tab-pane container fade" id="menu12">12</div>
              <div class="tab-pane container fade" id="menu13">13</div>
              <div class="tab-pane container fade" id="menu14">14</div>
              <div class="tab-pane container fade" id="menu15">15</div>
              <div class="tab-pane container fade" id="menu16">16</div>
              <div class="tab-pane container fade" id="menu17">17</div>
              <div class="tab-pane container fade" id="menu18">18</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-1">
        <div class="nav nav-pills">
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu16">Menu 16</a>
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu17">Menu 17</a>
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu18">Menu18</a>
        </div>
      </div>
    </div>
  </div>
...