引导程序选项卡-同一行中有多个卡

时间：2018-09-17 19:14:56

标签： html css twitter-bootstrap bootstrap-4

我正在尝试在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 个答案:

答案 0 :(得分：1)

这与元素嵌套有关。当使用引导网格时，您将不断定义被划分为列的行。如果您将行嵌套在行中的列中，则将创建更多的狭窄列。您正在不断地细分可用空间。

此外，我建议确保.row直接换行.col div。您的最终结果将更加可预测。

我在摘要中添加了一些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>

相关问题
最新问题