代码之家 › 专栏 › 技术社区 › cdub

使用Flex CSS和Bootstrap实现响应式布局

twitter-bootstrap-5 bootstrap-5 flexbox twitter-bootstrap css

cdub · 技术社区 · 3 年前

一段时间以来,我一直在尝试台式机、平板电脑和手机尺寸之间的全响应布局,但下面的布局有问题。

我使用的是bootstrap中的网格布局,但由于它是两列,随着宽度的缩小,第二列(共两列)位于左侧的主要内容部分下方。我想把它分成屏幕下面的状态。

这是起始视图:

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

这将是手机视图:

因此,在测试过程中,宽视图会缩小,我希望它跳到移动视图,在移动视图中,顶部边栏位于主要内容上方,并与主要内容的宽度相匹配,而底部侧边栏对底部做同样的事情。

把两边条都放在底部很容易,但我想试着找出把它分开的可能性。

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

1 回复 | 直到 3 年前

the Hutt 3 年前

解决方案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 查看并将浏览器宽度缩小到576px以下,以查看响应的更改。
我使用了小断点 col-sm-* 在这里,使用不同的 breakpoints 处理 different devices .

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

解决方案2: 使用柔性盒,玩秩序和包装。@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>

Deepak Kamat 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网格,Bootstrap有很多有用的实用程序- https://getbootstrap.com/docs/5.1/layout/css-grid/

如果你不想复制你的HTML,在桌面上显示一个,在手机上显示另一个,那么CSS网格布局是最好的选择-它有一些学习曲线,但值得尝试

YupMa 3 年前

您可以尝试以下属性

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

当屏幕大小达到一定的限制时,请更改这些值,如下面的代码段所示

.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>

Amirreza Noori 3 年前

使用 float-start 对于左列和 float-end 对于右列是最好的解决方案。 col-12 和 col-sm-* 仅用于定义列的宽度。避免使用 row 类,因为这将强制列的行为类似于flex项。而且 clearfix 父div的类是必需的,以防止以下元素重叠。

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

minabagheri 3 年前

首选 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Chandra Shekhar 3 年前

.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>

试试看