代码之家 › 专栏 › 技术社区 › AG_

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

multiple-columns bootstrap-4 css3 html

AG_ · 技术社区 · 5 年前

我正在使用 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>

0 回复 | 直到 5 年前

Max Hughes 5 年前

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

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

AG_ 5 年前

最后我找到了解决办法,我补充道 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>