使卡片列中的第二张卡片填充所有剩余宽度
Posted
技术标签:
【中文标题】使卡片列中的第二张卡片填充所有剩余宽度【英文标题】：Make second card in card-columns fill all remaining width 【发布时间】：2021-06-09 06:21:55 【问题描述】：我是 Bootstrap 的新手（以及一般的 Web 开发），我正在努力实现以下效果：
我的部分代码是：
<div id="content" class="p-4">
<div class="container-fluid">
<div class="card-columns">
<div class="card">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
<select id="country-select" class="form-control form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected>Select a country</option>
</select>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Chart</h5>
<h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
<canvas id="myChart" ></canvas>
<script>
<!-- CHART CODE AVAILABLE ON JSFIDDLE -->
</script>
</div>
</div>
</div>
</div>
</div>我的 Bootstrap 版本是 4.6，完整代码在 JSFiddle 上提供
【问题讨论】：
图块的高度是否应该按比例增长？ 那很好。目前，我正在尝试使用 flexbox，没有卡片列。老实说，我不知道什么是最好的方法。 【参考方案1】：您的问题是使用card-columns 类，它将您的卡片严格分为三列，即column-count: 3 规则。
Flex 将更适合您的任务。我没有指定类card-columns，而是指定了灵活性类。这里：
<div class="d-flex align-items-sm-baseline">
另外，对于缩进，我使用了gap 规则，将此选择器添加到 css。
对于类card 的第二个div，我添加了flex-sm-grow-1 类以允许该div 占用所有可用空间。
.container-fluid > .d-flex.align-items-sm-baseline
gap: 20px;
@media (max-width: 767px)
.container-fluid > .d-flex.align-items-sm-baseline
flex-direction: column !important;
align-items: stretch !important;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>android Rank Checker</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css" />
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha256-t9UJPrESBeG2ojKTIcFLPGF7nHi2vEc7f5A2KpH/UBU=" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default bg-dark navbar-dark">
<div id="sidebarCollapse">
<i class="fas fa-bars"></i>
<a href="#" class="navbar-brand ml-3">Android Rank Checker</a>
</div>
</nav>
<div class="wrapper">
<!-- Page Content -->
<div id="content" class="p-4">
<div class="container-fluid">
<div class="d-flex align-items-sm-baseline">
<div class="card">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
<select id="country-select" class="form-control form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected>Select a country</option>
</select>
</div>
</div>
<div class="card flex-sm-grow-1">
<div class="card-body">
<h5 class="card-title">Chart</h5>
<h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
<canvas id="myChart" ></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx,
type: "bar",
data:
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(255, 206, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(255, 159, 64, 0.2)"],
borderColor: ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)", "rgba(255, 206, 86, 1)", "rgba(75, 192, 192, 1)", "rgba(153, 102, 255, 1)", "rgba(255, 159, 64, 1)"],
borderWidth: 1,
,
],
,
options:
scales:
yAxes: [
ticks:
beginAtZero: true,
,
,
],
,
,
);
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="sidebar.js"></script>
<script src="app.js"></script>
</body>
</html>【讨论】：
非常感谢！有没有办法防止图表填充屏幕的所有可用高度？我还想制作 flexbox 换行（不在计算机上时将图表放在 @xvlaze，没问题。是的，如果您从<canvas id="myChart" width="400" height="400"></canvas> 中删除 height 和 width 值，则可以修复它。我已经更新了答案。请检查。
@xvlaze，我在你的 CSS 中添加了一个媒体查询。该模板现在是响应式的。断点 - 767px。
绝对的天才作品。非常感谢！！ :)【参考方案2】：
你应该有 2 列，你有 3。
@media (min-width: 576px)
.card-columns
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 1.25rem;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
orphans: 1;
widows: 1;
【讨论】：
恐怕这不是解决办法。【参考方案3】：我会使用 Bootstraps grid system。
解决方案：https://jsfiddle.net/b459x1uy/2/
<div class="row">
<div class="col-4">
// Dashboard card
</div>
<div class="col">
// Chart card
</div>
</div>
用柱子包裹你的卡片。在此示例中，第一列 (.col-4) 占用宽度的 12/4，第二列 (.col) 占用该行上的所有可用空间。
使用 Bootstrap 列还可以让您一次性控制响应式布局。如果不首先考虑 Bootstraps 网格系统，我不会编写额外的 CSS 来调整列的大小。
【讨论】：
很抱歉，我希望图表与 它确实将它们保持在一行。你看我做的 jsfiddle 例子了吗？ 这可能是显示问题，但无论输出窗口大小如何，JSFiddle 的输出都会在一列中显示卡片。以上是关于使卡片列中的第二张卡片填充所有剩余宽度的主要内容，如果未能解决你的问题，请参考以下文章