移动版本上不同顺序的 Bootstrap [英] Bootstrap with different order on mobile version

查看：12
本文介绍了移动版本上不同顺序的 Bootstrap的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在右列中有 2 列和嵌套行，如何使引导程序响应如下所示，

布局:

桌面版---------------|2 ||1 |||||||-------|||3 |||||||-------||||---------移动版(按顺序堆叠)--------|1 |||--------|2 |||||||||||--------|3 |||--------

这是我的代码:

<div class="col-lg-4"><div class="row"><div class="col-lg-12">1
<div class="row"><div class="col-lg-12">3

<div class="col-lg-8 order-lg-first">2

使用此代码在移动版本 1 3 2 中的顺序，我想要的是 1 2 3.

解决方案

因为 Bootstrap 4 使用 flexbox，列总是等高，你将无法获得您想要的桌面 (lg) 布局.

一种选择是禁用 lg 的 flexbox.使用 浮动 使 1,3 列自然向右拉，因为 2 更高.flexbox order- 将适用于移动设备.

https://www.codeply.com/go/8lsFAU3C5E

<div class="row d-flex d-lg-block"><div class="col-lg-8 order-1 float-left"><div class="card card-body high">2</div>
<div class="col-lg-4 order-0 float-left"><div class="card card-body">1</div>

<div class="col-lg-4 order-1 float-left"><div class="card card-body">3</div>

工作原理

另一个选择是一些使用 w-auto...

的 flexbox wrapping hack

https://www.codeply.com/go/mKykCsBFDX

<小时>

另见:
如何在引导程序 4 中修复意外的列顺序?
引导响应列高度

B-A-C -> A-B-C

I have 2 column and nested row in right column, how can i make bootstrap responsive like below,

layout :

desktop version
--------- ------
|   2   ||  1  |
|       ||     |
|       |-------
|       ||  3  |
|       ||     |
|       |-------
|       |
|       |
---------

mobile version (stacked in order)
--------
|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------

this is my code :

<div class="row">
   <div class="col-lg-4">
     <div class="row">
         <div class="col-lg-12">1
     </div>
      <div class="row">
         <div class="col-lg-12">3
     </div>
   </div>
   <div class="col-lg-8 order-lg-first">2
   </div>
</div>

With this code the order in mobile version 1 3 2, what I want is 1 2 3.

解决方案

Because Bootstrap 4 uses flexbox, the columns are always going to be equal height, and you'll not be able to get the desktop (lg) layout that you want.

One option is to disable the flexbox for lg. Use floats so that the 1,3 columns naturally pull to the right, since 2 is taller. The flexbox order- will work on mobile.

https://www.codeply.com/go/8lsFAU3C5E

<div class="container">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-8 order-1 float-left">
            <div class="card card-body tall">2</div>
        </div>
        <div class="col-lg-4 order-0 float-left">
            <div class="card card-body">1</div>
        </div>
        <div class="col-lg-4 order-1 float-left">
            <div class="card card-body">3</div>
        </div>
    </div>
</div>

How this works

Another option is some flexbox wrapping hack that uses w-auto...

https://www.codeply.com/go/mKykCsBFDX

Also see:
How to fix unexpected column order in bootstrap 4?
Bootstrap Responsive Columns Height

B-A-C -> A-B-C

这篇关于移动版本上不同顺序的 Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆