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

Question

我是 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

Answer 1

你应该有 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;
}

Answer 2

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

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

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

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

对于第二个 div 和 class card，我添加了 flex-sm-grow-1 class 让这个 div 占据所有免费 space.

.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>

Answer 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) 占该行的所有可用 space。

使用 Bootstrap 列还可以让您一次性控制响应式布局。如果不首先考虑 Bootstrap 的网格系统，我不会写额外的 CSS 来调整列的大小。

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

Make second card in card-columns fill all remaining width

html

css

twitter-bootstrap

bootstrap-4

card