代码之家 › 专栏 › 技术社区 › Dimitri

多分辨率col-x的引导用法

resolution responsive-design mobile css html

0

Dimitri · 技术社区 · 6 年前

<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个控件(输入),它们在桌面和移动分辨率上显示得很好,在桌面上它们彼此相邻,在移动设备上它们彼此低于对方。

我试过,但没有成功 col-md-x 因为我的div少了,但我做不到。

谢谢你的指导和建议!

1 回复 | 直到 6 年前

1

Tzimpo 6 年前

当col-6出现在比md小的屏幕上时,col-6将把这个div设置为每行2个

<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>