桌面中有4列，小型设备中有2列

Question

我有一个简单的块，我想要在桌面上显示4个项目，在小型设备上每行显示2个项目，意味着平板电脑和移动设备。类似下面这样的内容

​

现场演示：jsfiddle

这是我的HTML。

<div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6">Column 1</div>
      <div class="col-md-3 col-sm-6">Column 2</div>
        <div class="w-100 visible-sm" ></div> //tried this but not working
      <div class="col-md-3 col-sm-6">Column 3</div>
      <div class="col-md-3 col-sm-6">Column 4</div>
    </div>
  </div>

我不明白这是怎么回事？

Answer 1

您没有容纳最小的断点，所以您的列是全宽的。只需切换sm类：

​

<link rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-6 col-md-3">Column 1</div>
    <div class="col-6 col-md-3">Column 2</div>
    <div class="col-6 col-md-3">Column 3</div>
    <div class="col-6 col-md-3">Column 4</div>
  </div>
</div>

​

Fiddle demo