css - Boostrap 容器溢出且无响应（始终显示两列）

Question

我创建了一个包含两列的表单。但是当我减小浏览器宽度时，即使内容溢出，也会保留两列。我试图将代码更改为带有容器类的普通 DIV，指定列数，设置宽度，但它会抵制。

这是代码笔：https ://codesandbox.io/s/stoic-goldberg-4ugt6

以及父容器的源码：

<div class="container flex-wrap pt-3 w-75 ml-auto mr-auto mt-auto mb-5">
  <div class="row">
    <div class="col">
      <b-card>
        <SeriesForm />
      </b-card>
    </div>
    <div class="col">
      <b-card :header="captions[1]">
        <SeriesForm :group="forms[1]" />
      </b-card>
    </div>
  </div>
  <div class="row">
    <div class="col text-center p-4">
      <b-button>Analyse</b-button>
    </div>
  </div>
</div>

当有足够的空间和单列时，我怎样才能使它成为两列？

标签： cssbootstrap-4bootstrap-vue

Answer 1

您可以根据需要尝试类似col-sm-6orcol-xs-6或col-md-6or的课程。col-lg-6

<div class="container flex-wrap pt-3 w-75 ml-auto mr-auto mt-auto mb-5">
  <div class="row">
    <div class="col-sm-6">
      <b-card>
        <SeriesForm />
      </b-card>
    </div>
    <div class="col-sm-6">
      <b-card :header="captions[1]">
        <SeriesForm :group="forms[1]" />
      </b-card>
    </div>
  </div>
  <div class="row">
    <div class="col text-center p-4">
      <b-button>Analyse</b-button>
    </div>
  </div>
</div>