Начальной загрузки вкладок - несколько карт на одну и ту же строку

Question

Начальной загрузки вкладок - несколько карт на одну и ту же строку

Я пытаюсь заставить несколько карт появиться рядом друг с другом под вкладками Bootstrap 4. Я могу заставить карты работать нормально без вкладок, но когда я добавляю вкладки, карты составляют только 1 на строку (независимо от ширины).

Этот код показывает карты снаружи и внутри вкладок (снаружи работает, внутри нет). Есть идеи?

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <link href="css/style.css" rel="stylesheet">

  <title>Tracking DB</title>
</head>

<body>

  <div class='container-fluid'>

    <div class='col-md-5'>
      <div class='row module-row'>

        <div class='col-md-4'>
          <div class='card'>
            <div class='card-header module-card-header bg-secondary text-light'>
              <div class=''>Weight</div>
            </div>
            <div class='card-body module-card-body'>
              <div>Weight Start: 215 lbs</div>
              <div>Weight Current: 213 lbs</div>
              <div>Weight Average: 285.7 lbs</div>
            </div>
          </div>
        </div>

        <div class='col-md-4'>
          <div class='card'>
            <div class='card-header module-card-header bg-secondary text-light'>
              <div class=''>Fitness</div>
            </div>
            <div class='card-body module-card-body'>100 burpee Wednesday - 511 (8)<br>2 minute burpees - 711 (25)</div>
          </div>
        </div>

      </div>

      <div class='row'>

        <nav>
          <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-selected="true">First</a>
            <a class="nav-item nav-link" id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" 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-third" aria-selected="false">Third</a>
          </div>
        </nav>
      </div>
      <div class='row'>

        <div class="tab-content" id="nav-tabContent">
          <div class="tab-pane fade show active" id="nav-first" role="tabpanel" aria-labelledby="nav-first-tab">
            <div class='col-md-4'>
              <div class='card'>
                <div class='card-header module-card-header bg-secondary text-light'>
                  <div class=''>Weight</div>
                </div>
                <div class='card-body module-card-body'>
                  <div>Weight Start: 215 lbs</div>
                  <div>Weight Current: 213 lbs</div>
                  <div>Weight Average: 285.7 lbs</div>
                </div>
              </div>
            </div>

            <div class='col-md-4'>
              <div class='card'>
                <div class='card-header module-card-header bg-secondary text-light'>
                  <div class=''>Fitness</div>
                </div>
                <div class='card-body module-card-body'>100 burpee Wednesday - 511 (8)<br>2 minute burpees - 711</div>
              </div>
            </div>

          </div>

          <div class="tab-pane fade" id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab">
            This is the content on the second tab
          </div>

          <div class="tab-pane fade" id="nav-third" role="tabpanel" aria-labelledby="nav-third-tab">
            Nothing on the third tab
          </div>

        </div>

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

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

1 2

html css twitter-bootstrap bootstrap-4

1 ответ:

Serg Chernata · Accepted Answer · 2018-09-17 22:34:40

Это имеет все отношение к вашей вложенности элементов. Когда вы используете bootstrap grid, вы постоянно определяете строки, которые разделены на столбцы. Если вы продолжаете вкладывать строки в столбцы в строках, вы создадите еще более узкие столбцы. Вы постоянно делите доступное пространство.

Кроме того, я бы рекомендовал убедиться, что .row непосредственно обертывает .col дивов. Ваш конечный результат будет гораздо более предсказуемым.

Я добавил Некоторые html комментарии внутри фрагмент.

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <link href="css/style.css" rel="stylesheet">

  <title>Tracking DB</title>
</head>

<body>

  <div class='container-fluid'>

    <div class='col-md-5'>
      <div class='row module-row'>

        <div class='col-md-4'>
          <div class='card'>
            <div class='card-header module-card-header bg-secondary text-light'>
              <div class=''>Weight</div>
            </div>
            <div class='card-body module-card-body'>
              <div>Weight Start: 215 lbs</div>
              <div>Weight Current: 213 lbs</div>
              <div>Weight Average: 285.7 lbs</div>
            </div>
          </div>
        </div>

        <div class='col-md-4'>
          <div class='card'>
            <div class='card-header module-card-header bg-secondary text-light'>
              <div class=''>Fitness</div>
            </div>
            <div class='card-body module-card-body'>100 burpee Wednesday - 511 (8)<br>2 minute burpees - 711 (25)</div>
          </div>
        </div>

      </div>

      <div class='row'>

        <nav>
          <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-selected="true">First</a>
            <a class="nav-item nav-link" id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" 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-third" aria-selected="false">Third</a>
          </div>
        </nav>
      </div>
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-first" role="tabpanel" aria-labelledby="nav-first-tab">
          <div class='row'><!-- I moved this row to directly wrap the children columns -->
            <div class='col-md-6 col-xs-6'><!-- also, adjsuted the specified width -->
              <div class='card'>
                <div class='card-header module-card-header bg-secondary text-light'>
                  <div class=''>Weight</div>
                </div>
                <div class='card-body module-card-body'>
                  <div>Weight Start: 215 lbs</div>
                  <div>Weight Current: 213 lbs</div>
                  <div>Weight Average: 285.7 lbs</div>
                </div>
              </div>
            </div>

            <div class='col-md-6 col-xs-6'>
              <div class='card'>
                <div class='card-header module-card-header bg-secondary text-light'>
                  <div class=''>Fitness</div>
                </div>
                <div class='card-body module-card-body'>100 burpee Wednesday - 511 (8)<br>2 minute burpees - 711</div>
              </div>
            </div>
          </div>
        </div>

        <div class="tab-pane fade" id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab">
          This is the content on the second tab
        </div>

        <div class="tab-pane fade" id="nav-third" role="tabpanel" aria-labelledby="nav-third-tab">
          Nothing on the third tab
        </div>

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

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>