时间戳

首页 > 解决方案 > 引导程序使用 col-x 进行多种分辨率

html - 引导程序使用 col-x 进行多种分辨率

问题描述

我有以下代码：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="card">
      <div class="col-md-3" style="display: inline-block; float:left;">
        ... content ...
      </div>

      <div class="col-md-3" style="display: inline-block; float:left;">
        ... content ...
      </div>

      <div class="col-md-3" style="display: inline-block; float:left;">
        ... content ...
      </div>

      <div class="col-md-3" style="display: inline-block; float:left;">
        ... content ...
      </div>
    </div>
  </div>
</div>

这些是 4 个控件（输入），它们在桌面和移动分辨率下显示良好，在桌面上它们都彼此相邻，在移动设备上它们彼此下方。

我想要它，以便在较小的分辨率（移动）上，第一行有 2 个彼此相邻，第二行有 2 个彼此相邻，但仍然在较大的分辨率下，它们应该在 1 行上彼此相邻显示，这个出于“节省空间”的目的，控件不需要自己走完整的线，因为输入是有限的。

我已经尝试过，但没有通过玩col-md-xdiv 和更少的 div 来做到这一点，但我无法让它发挥作用。

我怎样才能做到这一点？感谢您的任何指导或建议！

标签： htmlcssmobileresponsive-designresolution

解决方案

在小于 md 的屏幕上使用 col-6，您的 col-6 将每行放置 2 个 div。我将行移到您的卡片类中

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container">
 <div class="card">
<div class="row">
   
    <div class="col-6 col-md-3 col-lg-3 co-xl-3">     
     ... content ...
    </div>

    <div class="col-6 col-md-3 col-lg-3 co-xl-3" >                
     ... content ...
    </div>

    <div class="col-6 col-md-3 col-lg-3 co-xl-3" >
    ... content ...
    </div>

    <div class="col-6 col-md-3 col-lg-3 co-xl-3" >
     ... content ...
    </div>
</div>
</div>

推荐阅读