Question

我有两个2个div。选中复选框时，第一个div已附加数据。现在，当我将数据附加到第一个div时，它会继续推动它下面的第二个div。我试图为第一个div设置高度和溢出，所以它不会将div推到它下方，但它仍然可以。我怎样才能解决这个问题，所以即使第一个div被填充，它也不会推动下面的div。

.panel-emp {
  height: 50%
}

<div class="col-xs-12 col-sm-4">
  <div class="panel-emp">
    <div style="overflow:scroll; height:70%;" class="panel_order">
    </div>
  </div>
  <div class="row" class="panel_2">
    <div class="col-md-8">
    </div>
  </div>

Answer 1

你有很多问题在发生，但大部分问题归结为不当使用bootstrap网格。

一个div上有两个类属性。
您要在另一个div旁边的div上定义一个引导行。
你的bootstrap断点类语法很糟糕，你在混合小媒体。
您没有正确地在行中嵌套列。

此示例使用引导类将panel_emp和panel_2 div放在彼此相邻的列中。在超小屏幕上，它们具有相等的宽度（6列）。在小屏幕和上屏幕上，它们分别有8列和4列。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
    <div class="col-xs-6 col-sm-4">
      <div class="panel-emp">Panel Emp</div>
  </div>
  <div class="col-xs-6 col-sm-8">
      <div class="panel_2">Panel 2</div>
  </div>
</div>

推荐阅读：

https://v4-alpha.getbootstrap.com/layout/grid/

如何防止div移动另一个div

1 个答案: