文章/答案/技术大牛

发布

社区首页 >问答首页 >SM上的Flex但不是XS上的Flex

问SM上的Flex但不是XS上的Flex
EN

Stack Overflow用户

提问于 2020-03-06 16:46:25

回答 2查看 336关注 0票数 1

我有以下HTML：

<div class="d-sm-flex flex-sm-row flex-sm-row-reverse">
   <div class='ml-2'></div>
   <div class='ml-2'></div>
   <div class='ml-2'></div>
</div>

它可以正常工作，但是在XS模式下，我想像往常一样显示列。但是如果我将div类设置为col ml-2，那么就会破坏flex显示。如何设置在XS中显示cols，而在SM及更高版本中显示flex？

bootstrap-4

css

回答 2

Stack Overflow用户

发布于 2020-03-06 19:33:35

基于你的评论，下面是你可以做的：

<div class="container">
  <div class="row">
     <div class='col-4 col-sm-12 ml-2'>TEST</div>
     <div class='col-4 col-sm-12 ml-2'>TEST</div>
     <div class='col-4 col-sm-12 ml-2'>TEST</div>
  </div>
</div>

我利用了Bootstrap的row和col，并将其全部放在一个container中。但是列的概念是，对于sizes和sm，它将是col-4 (您可以根据需要更改列大小)，对于sm之后的所有内容，它将是col-12，这意味着它将填充宽度。

票数 0

Stack Overflow用户

发布于 2020-03-06 22:22:19

请试一下这个。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="d-flex flex-row-reverse">
   <div class='col ml-2'>11</div>
   <div class='col ml-2'>22</div>
   <div class='col ml-2'>33</div>
</div>
<div class=" d-flex  flex-row-reverse">
   <div class='ml-2'>44</div>
   <div class='ml-2'>55</div>
   <div class='ml-2'>66</div>
</div>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60560392

复制

相似问题

问SM上的Flex但不是XS上的Flex
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SM上的Flex但不是XS上的FlexEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SM上的Flex但不是XS上的Flex
EN