使用引导网格系统的响应式设计

Posted 2023-03-06

【中文标题】使用引导网格系统的响应式设计

【英文标题】：Responsive design using bootstrap grid system

【发布时间】：2021-11-07 01:09:24

【问题描述】：

我有两种不同的桌面视图和移动视图布局。这是他们的样子

到目前为止，我已经编写了这段代码，但它并不完全符合我的需要。我不知道如何在移动视图中切换块 C 和 D

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="row row-cols-lg-2 row-cols-1"> 
    <div class="row col col-lg-10"> 
       <div class="col-3 bg-secondary">A</div> 
          <div class="col-9 "> 
             <div class="row bg-success p-1"> B</div> 
             <div class="row bg-primary order-lg-2 p-1">D</div> 
          </div> 
       </div> 
       <div class="col col-lg-2"> 
          <div class="col bg-warning p-1">C</div> 
       </div> 
</div>
   

我需要使用 Bootstrap 网格。知道如何开始吗？

【问题讨论】：

您确定要在移动视图中在 D 之后阻止 C

是的，这就是我所坚持的！

我可以很容易地告诉你，但在移动视图中 C 将介于 B 和 D 之间

我的代码里已经有了这个

【参考方案1】：

您可以使用order-xx-N 重新排序屏幕上的元素，引导程序内置了媒体查询。 https://getbootstrap.com/docs/5.0/layout/breakpoints/

可能的例子

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-3 bg-secondary mb-auto">A
      <p class="d-lg-none bg-light">Mobile layout</p>
      <p class="d-none d-lg-block bg-info">Desktop layout</p>
    </div>
    <div class="row col-9">
      <div class="col col-lg-9 bg-success p-1">B</div>
      <div class="col order-1 p-1  bg-primary ">C</div>
      <div class="col-12  bg-warning p-1  order-lg-2">D</div>
    </div>
  </div>

【讨论】：

非常感谢！！我没想过在屏幕上重新排序

刚刚注意到我的布局略有不同。块 C 应位于 D 下方的移动视图中，但 A 不应位于其左侧。

@SofiaLazrak 就是这种情况，你有什么不同的地方吗？你在哪里混淆了 order 和 col 类？

这个： A B D C 它仍然没有这样做，因为 D 应该占据 100% 的宽度

是的，谢谢。这是：jsfiddle.net/6op5h9f2