Начальные колонки на мобильном устройстве складываются вниз

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

Наконец, я получил решение, я добавил 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>

Answer 2

Вместо того, чтобы установить его в автоматический режим, возможно, установите для него заданный размер, как этот.

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