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