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>

Answer 2

最后我找到了解决方案，我在d-flex中添加了flex-nowrap和row，现在这两列并排出现，但是在移动设备上出现了水平滚动条。为了克服这个问题，我减小了包含内容的列的宽度。

下面是更新的代码段

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row d-flex flex-nowrap">
      <div class="col-auto bg-primary">aaa</div>
      <div class="col bg-secondary" style="width:87%">
          <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>
</div>

引导程序在移动设备上的堆积如山

2 个答案: