html - 移动设备上的引导列向上向下堆叠

Question

我正在使用 col-auto 和 col 创建一个双列布局，其中第一列的行为类似于左侧边栏，第二列将存储内容。

我的问题是，当我在第二列内容区域中使用 table 时，该列在移动设备中上下堆叠。

以下是了解我的情况的片段。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-auto bg-primary">aaa</div>
    <div class="col bg-secondary">
        <div class="table-responsive">
            <table class="table">
                <tbody>
                    <tr>
                        <td>sdasa</td>
                        <td>sdasa</td>
                        <td>sdasa</td>
                        <td>sdasa</td>
                        <td>sdasa</td>
                        <td>sdasa</td>
                        <td>sdasa</td>
                        <td>sdasa</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 1

与其将它设置为自动，不如给它一个像这样的设置大小。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-3 bg-primary">aaa</div>
    <div class="col-9 bg-secondary">
        <div class="table-responsive">
            <table class="table">
                <tbody>
                    <tr>
                        <td>sdasa</td>
                        <td>sdasa</td>
                        <td>sdasa</td>
                        <td>sdasa</td>
                        <td>sdasa</td>
                        <td>sdasa</td>
                        <td>sdasa</td>
                        <td>sdasa</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>