响应式的class选择器


发布时间:2020-03-16 20:11    作者: Uncle Hui   已过去:6 月,2 周   阅读总量:264 已被赞:0


 混合布局

说明:col-sm-6 :在屏幕尺寸大于等于sm型时,每列占6份,col-lg-3:在屏幕大于等于lg型号时候,每列占3份,其他时候默认一列一行

<div class="container">

<div class="row">

<div class="col-sm-6 col-lg-3">

111

</div>

<div class="col-sm-6 col-lg-3">

222

</div>

<div class="col-sm-6 col-lg-3">

333

</div>

<div class="col-sm-6 col-lg-3">

444

</div>

<div class="col-sm-6 col-lg-3">

555

</div>

<div class="col-sm-6 col-lg-3">

666

</div>

<div class="col-sm-6 col-lg-3">

777

</div>

<div class="col-sm-6 col-lg-3">

888

</div>

</div>

</div>

对齐

垂直对齐

1. row上加 .align-items-start/center/end

<div class="container">

<div class="row align-items-start" style="height:100px;border:1px solid #F00;">

<div class="col" style="background:#007bff;">

111

</div>

<div class="col" style="background:#868e96;">

222

</div>

<div class="col" style="background:#28a745;">

333

</div>

</div>

</div>

  1. col上加 .align-self-start/center/end
  2.                                   左边 中间 右边

<div class="container">

<div class="row" style="height:100px;border:1px solid #F00;">

<div class="col align-self-start" style="background:#007bff;">

111

</div>

<div class="col align-self-center" style="background:#868e96;">

222

</div>

<div class="col align-self-start" style="background:#28a745;">

333

</div>

</div>

</div>

 

 

水平对齐

justify-content-center 水平垂直居中,需要在row 上使用

end考右水平齐     around :分散居中      between 分散左右对齐

row上加 .justify-content-start/center/end/around/between

<div class="container">

<div class="row justify-content-start" style="border:1px solid #F00;">

<div class="col-4" style="background:#007bff;">

111

</div>

<div class="col-4" style="background:#28a745;">

222

</div>

</div>

</div>

间隙沟槽清除

row上加 .no-gutters

当行不足12列时候,两端会出现间隔,可以使用no-gutters 清除

<div class="container">

<div class="row no-gutters" style="border:1px solid #F00;">

<div class="col-4" style="background:#007bff;">

111

</div>

<div class="col-4" style="background:#28a745;">

222

</div>

</div>

</div>

 

点赞

0




登陆后方可评论