设有如下代码: <diy class="row"> <div class="">元素1</div> <div class="">无素2</div> <div class="">元素3</div> <div class="">元素4</div> </div> 如要其中的元素在小型屏幕显示时每行均兮为2 等份,在大型屏幕显示时每行均分为4等份,则 元素的class应设置为()。
时间: 2023-08-14 19:32:22 浏览: 126
为了在小型屏幕上将元素均分为2份,并在大型屏幕上将元素均分为4份,可以为每个元素添加以下类:
在小型屏幕上:`.col-6`,表示每个元素占据12个网格系统中的6个网格,即占据屏幕宽度的1/2。
在大型屏幕上:`.col-lg-3`,表示每个元素占据12个网格系统中的3个网格,即占据屏幕宽度的1/4。
因此,元素的class应设置为:
```
<div class="row">
<div class="col-6 col-lg-3">元素1</div>
<div class="col-6 col-lg-3">元素2</div>
<div class="col-6 col-lg-3">元素3</div>
<div class="col-6 col-lg-3">元素4</div>
</div>
```
相关问题
设有如下代码: <div class="container"> <div class="row"> <div class="col order-2">元素1</div> <div class="col order-1">元素2</div> <di class="col">元素3</div> </div> </div> 在引入Bootstrap的基础上,代码中所实现的予元 素顺序是()。
该代码实现的元素顺序是:元素2、元素1、元素3。
代码中使用了Bootstrap栅格系统中的`.container`、`.row`和`.col`类,表示一个固定宽度的容器,内部包含一行3列的栅格布局。
其中,`.order-*`类表示该列的显示顺序,使用该类可以调整元素在不同屏幕大小下的显示顺序。因此,`.order-2`表示该列在其他具有`.order-*`类的列之后显示,`.order-1`表示该列在其他具有`.order-*`类的列之前显示。
因此,元素2具有`.order-1`类,会在其他具有`.order-*`类`之后`显示,元素1具有`.order-2`类,会在其他具有`.order-*`类`之前`显示,元素3没有`.order-*`类,会按照默认的顺序在最后显示。所以,该代码实现的元素顺序是:元素2、元素1、元素3。
设有如下代码: <div class="container"> <div class="row"> <div class="col order-first">元素 1</diu> <div class="col order-1">元素2</div> <div class="col">元素3</div> </div> </div> 在引入Bootstrap的基础上,代码中所实现的予元 素顺序是()。
该代码实现的元素顺序是:元素1、元素2、元素3。
代码中使用了Bootstrap栅格系统中的`.container`、`.row`和`.col`类,表示一个固定宽度的容器,内部包含一行3列的栅格布局。
其中,`.order-first`类表示该列在其他具有`.order-*`类的列之前显示,`.order-*`类表示该列在其他具有`.order-*`类`之后`显示。
因此,元素1具有`.order-first`类,会在其他具有`.order-*`类`之前`显示;元素2具有`.order-1`类,会在其他具有`.order-*`类`之后`显示;元素3没有`.order-*`类,会按照默认的顺序在最后显示。所以,该代码实现的元素顺序是:元素1、元素2、元素3。
阅读全文