Bootstrap 4卡布局宽度不一致

Question

我的页面中有三张卡片，如图 1 所示。卡片在第 1 列中的宽度不同。在移动设备 (Chrome) 上测试时，它们的宽度都不同，底部如图 2 所示，两张卡片相互接触。

如何在移动设备上使左侧的列具有相同的宽度并保持响应速度和大小？我希望在网络和移动设备上使用统一的宽度和高度。

我的代码是：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">
            <div class="col-lg-12">
                <div class="card rounded-0">
                    <div class="card-header">
                        <h6 class="mb-0">Numbers</h6>
                    </div>
                    <div class="card-body" style="font-size: small; overflow-y: scroll;">                       
                        My Content                        
                    </div>
                </div>               
                <div class="col-lg-12">
                    <div class="card rounded-0">
                        <div class="card-header">
                            <h6 class="mb-0">More Numbers</h6>
                        </div>
                        <div class="card-body" style="font-size: small;">
                            My Content
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>   
    <div class="col-lg-8">
        <div class="card rounded-0">
            <div class="card-header">
                <h6 class="mb-0">Some stuff</h6>
            </div>
            <div class="card-body" style="font-size: small;">
                My Content
            </div>
        </div>
    </div>
</div>

网页布局：

手机布局：

https://www.codeply.com/go/Fia8Y6YPNl

Answer 1

您违反了 bootstrap 规则，即 div.col-* 始终是 div.row 的 child。 div.col-* 不能是另一个 div.col-* 的直接 child。这可能是您的问题。

试试这个：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-12">
                    <div class="card rounded-0">
                        <div class="card-header">
                            <h6 class="mb-0">Numbers</h6>
                        </div>
                        <div class="card-body" style="font-size: small; overflow-y: scroll;">
                            My Content
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="card rounded-0">
                        <div class="card-header">
                            <h6 class="mb-0">Numbers</h6>
                        </div>
                        <div class="card-body" style="font-size: small; overflow-y: scroll;">
                            My Content
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card rounded-0">
                <div class="card-header">
                    <h6 class="mb-0">Numbers</h6>
                </div>
                <div class="card-body" style="font-size: small; overflow-y: scroll;">
                    My Content
                </div>
            </div>
        </div>
    </div>
</div>

Bootstrap 4卡布局宽度不一致

Bootstrap 4 card layout width not consistent

html

bootstrap-4

bootstrap-grid