Bootstrap 4 - 列网格无法响应

Question

我正在尝试实现bootstrap 4列。但这并不起作用，响应的div彼此重叠。

如何响应地实现这一目标

这是我尝试过的，但它不起作用

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-3 height"></div>
<div class="col-md-3 height"></div>
<div class="col-md-3 height"></div>
<div class="col-md-3 height"></div>
</div>
</div>
</div>

这是我的css

.height{

height:350px;
}

Answer 1

尝试使用此代码

<div class="row">
<div class="container">

 <div class="col-md-3 col-sm-3 col-xs-6">
 <div class=" height">

 </div>
 </div>
 <div class="col-md-3 col-sm-3 col-xs-6">
  <div class=" height">

   </div>
   </div>
    <div class="col-md-3 col-sm-3 col-xs-6">
     <div class=" height">

     </div>
     </div>
     <div class="col-md-3 col-sm-3 col-xs-6">
     <div class=" height">

     </div>
     </div>
    </div>
   </div>
  </div>

col-md适用于min-width: 992px，宽度小于992px，您需要使用col-sm类min-width: 768px小于768px浏览器宽度你需要使用col-xs课程。因此，如果您想要使其响应，请尝试使用这些类。

和CSS： .height{width:100%;height:350px;background: #000;}

Answer 2

你可以添加所有列div＆＃34; col-sm-6＆＃34;和＆＃34; col-xs-12＆＃34;如果你想完全转发。

Answer 3

<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-3 height"></div>
<div class="col-xs-3 height"></div>
<div class="col-xs-3 height"></div>
<div class="col-xs-3 height"></div>
</div>
</div>
</div>

这应该有效。我试过js bin