Bootstrap堆栈元素在移动设备的顶部和底部，在桌面的侧边栏

Question

我的布局中有三个元素， top bar ， content bottom bar和bottom bar 。

我正在使用Twitter Bootstrap 4

在移动设备上，我希望它们像这样堆叠：

top bar
content
bottom bar

在桌面上，我想要这样：

content    top bar
           bottom bar

视觉指南：

我什至怎么办？ 我似乎无法让它们正确排成一行，而我在这里掉进了兔子洞的底部，所以我要问堆栈。

码：

 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <body> <div class=container> <div class=row> <div class="col-12 col-md-5 order-md-2"> <h3>Top Bar</h3> </div> <div class="col-12 col-md-7 order-md-1"> <h3>Content</h3> <p>A bit of Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac turpis ac massa mollis posuere.</p> <p>Duis urna purus, sagittis eget fermentum in, aliquam sed est.</p> <p>Praesent imperdiet a nisi at aliquet. Curabitur velit mi, vestibulum sed molestie non, egestas sit amet elit.</p> <p>Donec commodo tincidunt ligula sed pharetra. Etiam efficitur blandit laoreet. Aliquam eu pellentesque dui, eu accumsan dolor. Vestibulum congue facilisis porta. Praesent venenatis, risus eu mollis varius, erat est ornare felis, in rhoncus arcu metus eget ante.</p> </div> <div class="col-12 col-md-5 order-md-2 offset-md-7"> <h3>Bottom Bar</h3> </div> </div> </div> </body>

Answer 1

更改视口时，可以使用order类对元素进行重新排序。

在此处检查： https : //getbootstrap.com/docs/4.0/layout/grid/#reordering

Answer 2

在Bootstrap上禁用flex或在行上添加修饰符并设置display: block;

浮动中间孩子向左，然后浮动顶部和底部栏向右。 还要删除偏移量，以使其优雅地填充间隙。

这样可以为您提供桌面所需的功能； 当然，您将需要为您的移动断点删除那些。

<div class="container">
    <div class=row style="display: block;">
        <div class="col-12 col-md-5 order-md-2" style="float:right;">
            <h3>Top Bar</h3>
        </div>

        <div class="col-12 col-md-7 order-md-1" style="float:left;">
            <h3>Content</h3>
            <p>A bit of Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac turpis ac massa mollis posuere.</p>
            <p>Duis urna purus, sagittis eget fermentum in, aliquam sed est.</p> 
            <p>Praesent imperdiet a nisi at aliquet. Curabitur velit mi, vestibulum sed molestie non, egestas sit amet elit.</p>
            <p>Donec commodo tincidunt ligula sed pharetra. Etiam efficitur blandit laoreet. Aliquam eu pellentesque dui, eu accumsan dolor. Vestibulum congue facilisis porta. Praesent venenatis, risus eu mollis varius, erat est ornare felis, in rhoncus arcu metus eget ante.</p>
        </div>

        <div class="col-12 col-md-5 order-md-2"  style="float:right;" >
            <h3>Bottom Bar</h3>
        </div>
    </div>
</div>

Bootstrap堆栈元素在移动设备的顶部和底部，在桌面的侧边栏

问题描述

2 个解决方案

解决方案1
1 2018-11-08 01:57:41

解决方案2
1 已采纳 2018-11-08 05:54:47

Bootstrap堆栈元素在移动设备的顶部和底部，在桌面的侧边栏

问题描述

2 个解决方案

解决方案1 1 2018-11-08 01:57:41

解决方案2 1 已采纳 2018-11-08 05:54:47

解决方案1
1 2018-11-08 01:57:41

解决方案2
1 已采纳 2018-11-08 05:54:47