时间戳

首页 > 解决方案 > 使卡片列中的第二张卡片填充所有剩余宽度

html - 使卡片列中的第二张卡片填充所有剩余宽度

问题描述

我是 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" width="400" height="400"></canvas>
                    <script>
                        <!-- CHART CODE AVAILABLE ON JSFIDDLE -->
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

我的 Bootstrap 版本是 4.6，完整的代码可以在JSFiddle上找到

标签： htmlcsstwitter-bootstrapbootstrap-4card

解决方案

您的问题是使用 class card-columns，它将您的卡片严格分为三列，即column-count: 3规则。

Flex将更适合您的任务。而不是 class card-columns，我指定了灵活性类。这里：

<div class="d-flex align-items-sm-baseline">

此外，对于缩进，我使用了gap规则，将这个选择器添加到 css。

对于带有类的第二个 div card，我添加了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" width="" height=""></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>

推荐阅读