我怎样才能始终获得相同的列大小？ (Bootstrap)

Question

我正在建立一个网站，但我遇到了无法解决的问题。我有多张卡片，里面有信息，每列 4 列，它们切换到另一行。问题是卡的数量可以改变，而且它并不总是能被 4 整除。所以最后，我可以连续少于 4 列。当我连续少于 4 列时，显示与连续 4 列时的显示不一样。我知道它这样做是因为我使用 col-sm bootstrap class。这是我发现的唯一简单响应方式。我也尝试使用 col-sm-3 但问题是该网站不再响应。（见截图）顺便说一下，我使用 razor 视图，所以我可以编写 C# 和 HTML。

当我使用 col-sm 时显示的内容：Display col-sm

我想要的显示：Display col-sm-3

col-sm-3 的问题：Problem of col-sm-3

这是我的卡的显示代码：

.vehicule-card {
    border-radius: 10px;
    border: solid 4px #2F3136;
    background-color: #333333;
}

.vehicule-cardbody {
    height: 5em;
}

.vehicule-name {
    background-color: #392A49;
    color: #B8BABD;
    width: 10em;
    margin: auto;
    padding: 3px;
    border-radius: 10px;
    border: solid 4px #2F3136;
}

.vehicule-image {
    border-radius: 10px;
    border: solid 4px #2F3136;
}

<div class="container-fluid">
        <div class="headline">VOITURES COMPACTS</div>
        <div class="row">
            @foreach (var car in Model.cars)
            {
                if (counter != 0 && counter % 4 == 0)
                {
                @:</div>
                @:<div class="row">
                }

                    <div class="col-sm-3">
                     <div class="card p-3 m-2 box-shadow vehicule-card">
                      <img class="card-img-top vehicule-image" src="@car.ImgPath" alt="Card image cap">
                            <div class="card-body vehicule-cardbody">
                                <h2 class="vehicule-name">@car.Name</h2>
                            </div>
                     </div>
                    </div>

                counter++;
            }

        </div>




    </div>

不要尝试运行代码，它不会工作，因为它是一个剃须刀视图。

谢谢

Answer 1

您应该能够使用 Bootstrap 的 grid system 获得您想要的布局。

你想要的布局图片比 Bootstrap-4 提供的 container-xl 大（Bootstap-5 有一个 container-xxl），但你可以创建自己的 xxl 容器（我的示例的最大宽度为 1440 像素，但您可以更改它）。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<style>
body {
    background-color: #212121;
    color: #fff;
}

h1 {
    color: #B8BABD;
}

hr {
    width: 10%;
    border-top: 5px solid #392A49;
} 

.container-xxl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width:1500px) {
    .container-xxl {
        max-width: 1440px;

    }
}

.vehicule-card {
    border-radius: 10px;
    border: solid 4px #2F3136;
    background-color: #333333;
}

.vehicule-cardbody {
    height: 5em;
}

.vehicule-name {
    background-color: #392A49;
    color: #B8BABD;
    width: 100%;
    text-align: center;
    padding: 3px;
    border-radius: 10px;
    border: solid 4px #2F3136;
}

.vehicule-image {
    border-radius: 10px;
    border: solid 4px #2F3136;
}
</style>

<div class="container-xxl">
    <h1 class="text-center mt-5">VOITURES COMPACTS</h1>
    <hr>
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
        <div class="col mb-3">
            <div class="card p-3 m-2 box-shadow vehicule-card">
                <img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/FF8F8F/000000.png?text=Blista" alt="Card image cap">
                <div class="card-body px-0 vehicule-cardbody">
                    <h2 class="vehicule-name">Blista</h2>
                </div>
            </div>
        </div>
        <div class="col mb-3">
            <div class="card p-3 m-2 box-shadow vehicule-card">
                <img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/FFEE8F/000000.png?text=Dilettante" alt="Card image cap">
                <div class="card-body px-0 vehicule-cardbody">
                    <h2 class="vehicule-name">Dilettante</h2>
                </div>
            </div>
        </div>
        <div class="col mb-3">
            <div class="card p-3 m-2 box-shadow vehicule-card">
                <img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/B0FF8F/000000.png?text=Issi" alt="Card image cap">
                <div class="card-body px-0 vehicule-cardbody">
                    <h2 class="vehicule-name">Issi</h2>
                </div>
            </div>
        </div>
        <div class="col mb-3">
            <div class="card p-3 m-2 box-shadow vehicule-card">
                <img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/8FD2FF/000000.png?text=Panto" alt="Card image cap">
                <div class="card-body px-0 vehicule-cardbody">
                    <h2 class="vehicule-name">Panto</h2>
                </div>
            </div>
        </div>
        <div class="col mb-3">
            <div class="card p-3 m-2 box-shadow vehicule-card">
                <img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/AB8FFF/000000.png?text=Prairie" alt="Card image cap">
                <div class="card-body px-0 vehicule-cardbody">
                    <h2 class="vehicule-name">Prairie</h2>
                </div>
            </div>
        </div>
        <div class="col mb-3">
            <div class="card p-3 m-2 box-shadow vehicule-card">
                <img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/FF8FF4/000000.png?text=Rhapsody" alt="Card image cap">
                <div class="card-body px-0 vehicule-cardbody">
                    <h2 class="vehicule-name">Rhapsody</h2>
                </div>
            </div>
        </div>
    </div>
</div>

我的示例代码很简单 HTML，但您应该能够将其反转以使用 Razor。

我怎样才能始终获得相同的列大小？ (Bootstrap)

How can I always get the same column size? (Bootstrap)

html

css

c#

bootstrap-4

razor-pages