Bootstrap 5响应式排序，列内列

dddzy1tm 于 2023-05-11 发布在 Bootstrap

关注(0)|答案(2)|浏览(161)

是否有可能重新排列此布局（md+设备）。。

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="d-flex">
    <div class="col-8 bg-warning">
      <div>first div</div>
      <div>second div</div>
      <div>third div</div>
    </div>
    <div class="col-3 bg-info">
      other content
    </div>
  </div>
</body>

......在xs，sm设备上？

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="d-flex">
    <div class="col-12 bg-warning">
      <div>first div</div>
      <div class="bg-info">
        other content
      </div>
      <div>second div</div>
      <div>third div</div>
    </div>
  </div>
</body>

在这里，蓝色列被移动到黄色列的内部。
我知道有.order类，但我只看到它们用于在另一列之前移动一列。
先谢谢你了！

twitter-bootstrap

来源：https://stackoverflow.com/questions/76205591/bootstrap-5-responsive-ordering-with-column-inside-column

2条答案

按热度按时间

rryofs0p1#

不直接通过CSS，但您可以使用显示属性的技巧。
无论如何，请记住bootstrap是一个移动的优先的框架，所以你必须考虑“我如何重新安排这个移动布局，进入md屏幕”，主要布局是移动的，然后尝试将布局转换为更大的屏幕。今天，超过70%的互联网浏览是通过智能手机进行的。
下面是Bootstrap 5的代码！：D

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex">
    <div class="col-12 col-md-8 bg-warning">
      <div>first div</div>
      <div class="bg-info d-md-none">
        other content
      </div>
      <div>second div</div>
      <div>third div</div>
    </div>
    <div class="d-none d-md-flex col-md-3 bg-info">
      other content
    </div>
</div>

赞(0）回复(0）举报 2023-05-11

km0tfn4u2#

你可以使用下面的代码：

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="d-lg-flex d-none">
    <div class="col-8 bg-warning">
      <div>first div</div>
      <div>second div</div>
      <div>third div</div>
    </div>
    <div class="col-3 bg-info">
      other content
    </div>
  </div>
   
  <div class="d-lg-none d-flex">
    <div class="col-12 bg-warning">
      <div>first div</div>
      <div class="bg-info">
        other content
      </div>
      <div>second div</div>
      <div>third div</div>
    </div>
  </div>
</body>

说明：顶部代码只在大屏幕上显示，在小屏幕中隐藏，底部代码只在小屏幕上显示，在大屏幕中隐藏。

赞(0）回复(0）举报 2023-05-11

我来回答

Bootstrap 5响应式排序，列内列

2条答案

相关问题

热门标签

最新问答