Question

我已经开始了如下所示的新布局，但是如果我开始调整浏览器的大小，“右”列中的内容将溢出到左列中，至少直到命中“ break”并启动引导程序为止堆放物品。

如何控制此溢出问题？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container-fluid" style="margin-bottom:5px">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-6">a</div>
      <div class="col-sm-6">b</div>
    </div>
  </div>
</div>

[更新]
我认为我的问题与最小宽度属性Im碰到不同的col- *类有关。一旦为这些值定义了一些值，就可以控制“中断”发生的位置。

Answer 1

在Bootstrap中，您首先要处理行...然后里面的所有内容都是一列...因此，请删除col-sm-12 div ...

每行将覆盖整个12宽度，除非您像指定的那样将其分成2个较小的6部分...

因为它们相等，所以您无需为其指定断点...仅class col就可以了...

const dict = array.reduce((result, value, index) => ({
  ...result,
  [value]: [...(result[value] || []), index]
}), {});

Answer 2

您是否需要保留此布局？

我觉得您有一排无用的列（其内部包含两列）

您可以简化布局，只需要一个带有行的容器-然后每一行将具有必要的列。

这样的排序：

（添加了绿色边框CSS，仅用于说明目的-必要时将其删除）

div.col-sm-6{
  border: 1px solid green;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container-fluid" style="margin-bottom:5px">
  <div class="row">
    <div class="col-sm-6">a</div>
    <div class="col-sm-6">b</div>
  </div>
</div>

两列网格如何防止重叠

2 个答案: