使用 Flex CSS 和 Bootstrap 进行响应式布局

Posted 2023-03-07

【中文标题】使用 Flex CSS 和 Bootstrap 进行响应式布局

【英文标题】：Using Flex CSS and Bootstrap for a responsive layout

【发布时间】：2021-11-24 01:41:57

【问题描述】：

我一直在尝试在台式机、平板电脑和手机尺寸之间使用完全响应式布局，但在使用下面的布局时遇到了问题。

我使用的是引导程序中的网格布局，但由于它是两列，随着宽度的缩小，第二列的两列位于左侧的主要内容部分下方。我想将其拆分为屏幕下方的状态。

这是起始视图：

这就是我想要发生的事情：

这将是手机视图：

因此，在测试过程中，宽视图会缩小，我希望它跳转到移动视图，其中顶部边栏高于主要内容并与主要内容的宽度相匹配，而底部边栏对底部。

将两个侧边栏放在底部很容易，但我想尝试找出将其拆分的可能性。

为了测试，我使用的是 flexbox、css3 和 bootstrap5+，没有插件或 javascript。

【问题讨论】：

到目前为止你的代码是什么样子的？

【参考方案1】：

解决方案 1：您可以将 CSS float 功能与 float-end 和 float-start 引导类 ref 一起使用：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid vh-100 vw-100 py-2 bg-light clearfix">
  <div class="float-sm-end   col-sm-4 col-12 h-25  bg-secondary">Sidebar Top</div>
  <div class="float-sm-start col-sm-8 col-12 h-100 bg-warning">Content</div>
  <div class="float-sm-end   col-sm-4 col-12 h-25  bg-info">Sidebar bottom</div>
</div>

进入 Full page 视图并将浏览器宽度减小到 576 像素以下以查看响应更改。 我这里用了小断点col-sm-*，用不同的breakpoints来处理different devices。

整个 boostrap v5.1.3 CSS 文件中只有d-*-grid 规则。剩下的就是experimental。

---

解决方案 2： 使用 flexbox，使用 order 和 wrap。 @Rana 答案的改进版：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column flex-sm-wrap vh-100 vw-100 py-2 bg-light">
  <div class="order-sm-1 order-2 col-sm-8 col-12 h-100 bg-warning">Content</div>
  <div class="order-sm-2 order-1 col-sm-4 col-12 h-25  bg-secondary">Sidebar Top</div>
  <div class="order-sm-3 order-3 col-sm-4 col-12 h-25  bg-info">Sidebar bottom</div>
</div>

【讨论】：

这很好。你如何让侧边栏说 300 像素，而主要内容是其余部分，如 flex 增长而不是使用 col-12、col-8、col-x 样式

@cdub Bootstrap 使用相对大小。您必须提供自己的课程，例如jsfiddle。您需要 col-12 以便当它们堆叠时它们的宽度相同（100%）。

啊，我明白了。 vh-100 和 vw-100 也很重要？

如果整个内容需要整页，则使用 vh-100 和 vw-100。否则，如果您在 div 中的内容是绝对大小（以 px 为单位），那么您不需要相对大小。

感谢@onkar rukar 这完全符合我的要求

【参考方案2】：

您可以尝试以下属性

flex-flow: column;
flex-wrap: wrap/nowrap;
order: 1/2/3/....;

当屏幕尺寸达到一定的限制时，可以像下面的 sn-p 那样更改这些值

.container 
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  background-color: lightgray;


.containerBox 
  width: 50%;


.containerBox1 
  background-color: lightgreen;
  order: 2;


.containerBox2 
  background-color: yellow;
  order: 1;


.containerBox3 
  background-color: lightblue;
  order: 3;


@media screen and (max-width: 700px) 
  .container 
    background-color: grey;
    flex-wrap: nowrap;
  
  .containerBox 
    width: 100%;
  
  .containerBox1 
    order: 1;
  

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container vh-100 vw-100">
  <div class="containerBox containerBox1 h-25">Sidebar Top</div>
  <div class="containerBox containerBox2 h-100">Content</div>
  <div class="containerBox containerBox3 h-25">Sidebar bottom</div>
</div>

【参考方案3】：

您可能想尝试使用 Bootstrap 的 Flex 订单实用程序来获得所需的结果

https://getbootstrap.com/docs/5.0/utilities/flex/#order

另外，分享一个代码示例，以便其他人可以看到您已经尝试过的内容，我相信即使使用 Flex 的 Order 实用程序，您也可能会遇到一些问题，但这取决于您的 html 结构。

对于这样的布局，我的偏好是为移动/桌面创建顶部列的副本，并使用d- 实用程序来显示隐藏正确的。

<div class="container">
    
    <div class="row ">
      
      <div class="col-12 d-md-none d-block">
        <div class="box box-1">sidebar top col (only for mobile)</div>
      </div>
      
      <div class="col-md-8">
        <div class="box box-2">main col</div>
      </div>
      
      <div class="col-md-4">
        <div class="box box-3 d-none d-md-block">sidebar top col (only for desktop)</div>
        <div class="box box-4">sidebar bottom col</div>
      </div>
      
      
    </div>
  </div>

示例 - https://jsbin.com/yidokokewu/1/edit?html,css,output

或者，如果您已经在使用 Bootstrap 5，那么您也应该考虑使用 CSS Grid，Bootstrap 5 附带了许多有用的实用程序 - https://getbootstrap.com/docs/5.1/layout/css-grid/

如果您不想复制 HTML 以在桌面上显示另一个在移动设备上显示，那么用于布局的 CSS Grid 是最佳选择 - 它有一些学习曲线，但值得一试

【讨论】：

附加的例子没有按照上面帖子中的指示工作

【参考方案4】：

将float-start 用于左列，float-end 用于右列是最佳解决方案。 col-12 和 col-sm-* 仅用于定义列的宽度。避免对父 div 使用 row 类，因为这将强制列表现得像弹性项目。 还需要父 div 的 clearfix 类，以防止以下元素重叠。

更多关于浮动的信息：https://getbootstrap.com/docs/5.1/utilities/float/ 有关清除修复的更多信息：https://getbootstrap.com/docs/5.1/helpers/clearfix/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="clearfix">
    <div class="col-12 col-sm-4 float-end bg-secondary">Sidebar Top Area</div> 
    <div class="col-12 col-sm-8 float-start bg-primary">Content<br>Some Text<br>Some Text</div>
    <div class="col-12 col-sm-4 float-end bg-success">Sidebar Bottom Area</div> 
</div>

【参考方案5】：

转到enter link description here 要么 enter link description here

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">     
  <div class="container-fluid">     
    <div class="row">
      <div class="col-12 col-sm-9 bg-success">col-12 col-sm-9</div>
      <div class="col-12 col-sm-3 bg-warning">col-12 col-sm-3</div>
    </div>
  </div>
</div>

</body>
</html>

【讨论】：

这很好。你如何让侧边栏说 300 像素，而主要内容是其余部分，如 flex 增长而不是使用 col-12、col-8、col-x 样式 -

使用偏移概念在网格中创建间距，例如： .col-md-4 .col-md-4 .ml-auto .col-md-3 .ml-md-auto .col-md-3 .ml-md-auto .col-auto .mr-auto .col-auto

转到getbootstrap.com/docs/4.0/layout/grid

【参考方案6】：

.content 
  background-color: #faaa03;
  height: 500px;

.sidebarTop 
  background-color: #ccd0d5;

.sidebarBottom 
  background-color: #99d2f2;

.custom-row 
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="custom-row clearfix d-flex flex-wrap d-lg-block">
    <div class="col-12 col-md-8 col-lg-8 content order-2 float-lg-start">Content</div>
    <div class="col-12 col-md-2 col-lg-4 sidebarTop order-1 float-lg-end">Sidebar Top Area</div>
    <div class="col-12 col-md-2 col-lg-4 sidebarBottom order-3 float-lg-end">Sidebar Bottom Area</div>
  </div>
</div>

试试看