html - 桌面 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>

很困惑这里有什么问题？

标签： htmlcssbootstrap-4flexboxbootstrap-5

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>

小提琴演示