Css Boostrap容器溢出且无响应（始终显示两列）_Css_Bootstrap 4_Bootstrap Vue

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

css bootstrap-4

Css Boostrap容器溢出且无响应（始终显示两列）,css,bootstrap-4,bootstrap-vue,Css,Bootstrap 4,Bootstrap Vue,我创建了一个包含两列的表单。但是，当我减小浏览器宽度时，即使内容溢出，也会保留两列。我试图用container类将代码更改为纯DIV，指定cols count，设置width，但它拒绝了这是代码笔：以及父容器的源代码： <div class="container flex-wrap pt-3 w-75 ml-auto mr-auto mt-auto mb-5"> <div class="row"> <div class="col">

我创建了一个包含两列的表单。但是，当我减小浏览器宽度时，即使内容溢出，也会保留两列。我试图用container类将代码更改为纯DIV，指定cols count，设置width，但它拒绝了

这是代码笔：

以及父容器的源代码：

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

当有足够的空间时，我如何使其成为两列，否则为单列

你可以根据自己的需要尝试使用col-sm-6、col-xs-6、col-md-6或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>

你可以根据自己的需要尝试使用col-sm-6、col-xs-6、col-md-6或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>

这是因为flex显示屏

您需要做的是为每个表单设置行下方的列：

用这个代替。。间距有点紧，因此可能需要删除一些边距和填充

这将使每个窗体在大屏幕和以下屏幕上全宽，在xl屏幕上宽50%

这是因为flex显示屏

您需要做的是为每个表单设置行下方的列：

用这个代替。。间距有点紧，因此可能需要删除一些边距和填充

这将使每个表单在大屏幕和以下屏幕上全宽，在xl屏幕上全宽50%

我已经为您的标签添加了属性

如果您将展开屏幕，则您将获得初始格式。

我已将属性添加到您的标记中

如果您将展开屏幕，那么您将获得初始格式。

问题不在于引导网格本身，而在于复选框的显示方式

您在.align snifly类中定义，您的复选框组必须始终为3列。显示：电网并没有那么聪明。所以，如果你告诉它是3列，它将是3列，忽略所有其他内容。这就是您的内容溢出的原因

因此，至少要解决或改进这个问题。必须更改“显示：栅格”列的处理方式

一种方法是使用CSS@media查询，定义给定屏幕宽度下应有多少列。这样，当屏幕变小时，您可以将其缩小

如果与当前文本一起使用，下面的CSS应该可以使用

.整齐地排列{ 显示：网格；栅柱间隙：10px；网格行间距：10px；网格模板柱：1fr 1fr 1fr； } @媒体屏幕和最大宽度：1350px{ .整齐地排列{ 网格模板柱：1fr 1fr； } } @媒体屏幕和最大宽度：576px{ .整齐地排列{ 网格模板列：1fr； } } 另一个解决方案是将repeat函数与minmax结合使用。此选项将比第一个选项更具动态性，但会打破不同组之间的一致性

.整齐地排列{ 显示：网格；栅柱间隙：10px；网格行间距：10px； /* minmax中的110px是允许每个列的大小。因此，如果当前行中没有空间使列超过110px，它将移动到新行。因此，您需要根据内容大小进行调整。 */ 网格模板列：repeatauto-fit，minmax110px，1fr； }

问题不在于引导网格本身，而在于复选框的显示方式

因此，至少要解决或改进这个问题。必须更改“显示：栅格”列的处理方式

一种方法是使用CSS@media查询，定义给定屏幕宽度下应有多少列。这样，当屏幕变小时，您可以将其缩小

如果与当前文本一起使用，下面的CSS应该可以使用

.整齐地排列{ 显示：网格；栅柱间隙：10px；网格行间距：10px； /* minmax中的110px是允许每个列的大小。因此，如果当前行中没有空间使列超过110px，它将移动到新行。因此，您需要根据内容大小进行调整。 */ 网格模板列：repeatauto-fit，minmax110px，1fr； } 你没有具体说明

y在哪里替换这个类，所以我到处替换它。在小型显示器上，它真的将行分成两行。但是，当显示两列但其内容溢出框架时，会有一个宽度。找到名为的类。精确对齐并将其显示类型更改为所需媒体屏幕上的块，在此元素内，您将有类的子元素。自定义控件内联将其宽度设置为50%，并立即删除它们的边距。这应该可以解决您的内容溢出问题。如果您添加col类作为您希望相应更改宽度的元素的父容器，在我们的情况下，col类应该是卡元素的父元素。您可以编辑代码笔吗？它会更容易阅读。我想猜猜你不是什么意思。你的建议我很难理解。请更新您的答案或代码沙盒。谢谢你没有指定在哪里替换这个类，所以我到处替换它。在小型显示器上，它真的将行分成两行。但是，当显示两列但其内容溢出框架时，会有一个宽度。找到名为的类。精确对齐并将其显示类型更改为所需媒体屏幕上的块，在此元素内，您将有类的子元素。自定义控件内联将其宽度设置为50%，并立即删除它们的边距。这应该可以解决您的内容溢出问题。如果您添加col类作为您希望相应更改宽度的元素的父容器，在我们的情况下，col类应该是卡元素的父元素。您可以编辑代码笔吗？它会更容易阅读。我想猜猜你不是什么意思。你的建议我很难理解。请更新您的答案或代码沙盒。谢谢你。这里有着和Charbel answer一样的麻烦。框溢出了一些宽度，仍然显示两列。我已经看到了您的代码。我建议您，如果您可以用下拉菜单替换收音机输入，那么它可能会对您有所帮助。使用而不是希望它能帮助你。Multiselect是一个选项，但从用户体验的角度来看，它更难使用。当我只有三个项目时，这是不好的。也许你是对的，但当有很多选择时，下拉列表是好的。你们可以在性领域使用收音机，也可以在下面的领域使用下拉菜单。谢谢。这里有着和Charbel answer一样的麻烦。框溢出了一些宽度，仍然显示两列。我已经看到了您的代码。我建议您，如果您可以用下拉菜单替换收音机输入，那么它可能会对您有所帮助。使用而不是希望它能帮助你。Multiselect是一个选项，但从用户体验的角度来看，它更难使用。当我只有三个项目时，这是不好的。也许你是对的，但当有很多选择时，下拉列表是好的。你们可以在性领域使用收音机，也可以在下面的领域使用下拉菜单。谢谢你们，但这只是同一概念的又一次迭代。当两个单元格并排时，框溢出。尝试拖动代码笔面板。谢谢，但这只是相同概念的另一次迭代。当两个单元格并排时，框溢出。尝试拖动代码笔面板。这将修复表单框的内容，谢谢。但是如果我把窗口缩得太小，这两个框仍然会彼此分开显示。将cols=12添加到你的b列中这将修复表单框的内容，谢谢。但是，如果我将窗口缩小得太大，两个框仍会彼此分开显示。将cols=12添加到b列中