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