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

您违反了始终让 div.col-* 成为 div.row 的子项的引导规则。 div.col-* 不能是另一个 div.col-* 的直接子级。这可能是您的问题。

试试这个：

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