台式机 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

台式机 4 列，小型设备 2 列

4 columns in desktop, 2 in small device

html

css

flexbox

bootstrap-4

bootstrap-5