Boostrap容器溢出并且没有响应（总是显示两列）

Question

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

这是codepen：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>

如果有足够的空间，如何将其设置为两列，否则将其设置为单列？

Answer 1

您可以根据需要尝试col-sm-6或col-xs-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>