如何使用 Bootstrap 在响应式视图中拆分列？

Posted 2023-03-06

【中文标题】如何使用 Bootstrap 在响应式视图中拆分列？

【英文标题】：How to split a column in a responsive view using Bootstrap?

【发布时间】：2017-02-22 10:46:04

【问题描述】：

我正在使用 Bootstrap v4 alpha4

目前我有：

.row
  .col-xs-12.col-md-8
    div A
  .col-xs-12.col-md-4
    div B
    div C

对于 xs 布局，我希望 div 的顺序为：

Div B
Div A
Div C

我不知道该怎么做，也不知道怎么问。我不是前端开发人员，所以我不知道叫什么。

我们可以将 HTML 更改为我们想要的任何内容。它确实不必必须保持现在的样子。

【问题讨论】：

我认为引导程序中没有任何类可以用来改变元素的顺序。

@Mr_Green fwiw，当前使用的 html 结构未锁定。我们可以做任何我们想做的事情。

你试过用弹性盒子吗？

@Olga 我从未使用过 flexbox，但如果它解决了这个问题，我愿意接受。如果您写一个使用它的答案，我真的很感激一些额外的解释。

好，我现在给你做一个codepen

【参考方案1】：

Bootstrap 确实有 column ordering classes，但在这种情况下，您可以简单地使用 responsive float classes..

<div class="row">
    <div class="col-md-4 pull-md-right">
        b
    </div>
    <div class="col-md-8">
        a
    </div>
    <div class="col-md-4">
        c
    </div>
</div>

http://www.codeply.com/go/XL5zJELyLD

【讨论】：

正是我在找什么^_^

【参考方案2】：

因此，使用 bootstrap 中的类和一些通用样式，您可以像我在这支笔中那样实现。

http://codepen.io/TunderScripts/pen/PGadpr

HTML：

<div class="row">
  <div class="col-xs-12 col-md-4 pull-right col1"></div>
  <div class="col-xs-12 col-md-8 pull-left col2"></div>
  <div class="col-xs-12 col-md-4 pull-right col3"></div>
</div>

css：

.col1
  background: red;
  height: 200px;

.col2
  background: blue;
  height: 600px;

.col3
  background: green;
  height: 200px;

您可以通过使用他们的浮动类（拉左，拉右）来更改默认行为。

【讨论】：

这有点过度指定，但它也有效。非常感谢。我不知道pull-* 类

【参考方案3】：

我使用float 和position css 属性的组合而不是flexbox 来获得预期的结果。假设大宽度为150px，小宽度为100px。

Working Fiddle

.container 
  width: 250px;
  position: relative;

.blue 
  width: 150px;
  height: 300px;
  background: blue;
  position: absolute;

.pink 
  width: 100px;
  height: 100px;
  background: pink;
  float: right;

.green 
  width: 100px;
  height: 100px;
  background: green;
  clear: right;
  float: right;

@media (max-width: 450px) 
  .blue 
    position: relative;
  
  .green,
  .pink 
    float: none;
    width: 150px;
  

<div class="container">

  <div class="pink"></div>
  <div class="blue"></div>
  <div class="green"></div>
</div>

【讨论】：

谢谢。如果我正在编写香草 CSS，这正是我要寻找的。​​span>

@naomik 是的。请注意，这只有在您知道父母的宽度时才有效。

【参考方案4】：

正如承诺的那样，一个简单的draft

HTML

<div class="row">
   <div class="col1">DIV A</div>
   <div class="col2">DIV B</div>
   <div class="col3">DIV C</div>
</div>

CSS

    .row 
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  width: 400px;
  margin: 0 auto;


.col1 
  width: 200px;
  height: 400px;
  background-color: #86a0ff;


.col2 
  width: 150px;
  height: 150px;
  background-color: #ff6cde;


.col3 
  margin-top: -200px;
  margin-left: auto;
  width: 150px;
  height: 150px;
  background-color: #35af6d;


@media (max-width: 768px) 
  .row 
    justify-content: center;
    flex-direction: column;
  

  .col1 
    order: 2;
    width: 200px;
    margin-top: 50px;
  

  .col2 
    order: 1;
    width: 200px;
  

  .col3 
    order: 3;
    width: 200px;
    margin-top: 50px;
    margin-left: 0;
  

至于解释，这里有一个很棒的guide 到 flexbox。我的示例中的主要思想是，通过使用 order 属性，您可以操纵块显示的顺序。使用 flexbox 的主要优点是您无需加载任何库（例如 Bootstrap）即可获得所需的结果，例如响应性。而且它还有一个不错的浏览器support，除非你需要支持旧版本的浏览器。希望我的回答对你有帮助！

【讨论】：

谢谢。 flexbox 对我来说太陌生了。很高兴看到它应用于我已经看到以其他方式解决的问题。