Bootstrap 4 Beta 0网格系统上的行距 [英] Rowspan on Bootstrap 4 Beta 0 Grid System

问题描述

我正在研究电子商务模板，但女巫使用的是Bootstrap 4 Beta.我可以在移动设备上使用它，但是在台式机上我无法弄清楚如何使购买框"保持标题.根据我的说法，它在图库"部分下会消失.

Hi I'm working on a eCommerce template witch uses Bootstrap 4 Beta. I made it work on mobile, but on desktop I could not figure how to make the Buy Box stay under title. On my aproach it apears under the Gallery section.

所需桌面

所需的手机

<div class="container-fluid">
    <div class="row">
        <div class="col-xl-1 d-none d-md-block"></div>
        <div class="col-xl-10 col-12">
           <div class="row">
               <div class="col-xl-6 order-xl-1 col-12 order-2 d-flex">
                   Gallery
               </div>
               <div class="col-xl-6 order-xl-2 col-12 order-1">
                   Title
               </div>
               <div class="col-xl-6 order-xl-3 col-12 order-3">
                   Buy Box
               </div>
               <div class="col-12  order-xl-4  order-4">
                   Description
               </div>
               <div class="col-12  order-xl-5 order-5">
                   Related
               </div>
           </div>
       </div>
       <div class="col-xl-1 d-none d-md-block"></div>
    </div>
</div>

推荐答案

您可以使用util类将cols浮动在xl宽度上，这将导致百思买"框在标题下移动，假设画廊的高度更高.

You could use the util classes to float the cols on xl widths, which would cause the "Best Buy" box to move under the title, assuming the height of the gallery is taller.

https://www.codeply.com/go/3E3Y9A5zZa

<div class="container-fluid">
    <div class="row">
        <div class="col-xl-1 d-none d-md-block"></div>
        <div class="col-xl-10 col-12">
           <div class="row d-xl-block d-flex h-100">
               <div class="col-xl-6 order-xl-1 col-12 order-2 order-xl-1 d-flex bg-warning tall float-left">
                   Gallery
               </div>
               <div class="col-xl-6 order-xl-2 col-12 order-1 bg-primary float-left">
                   Title
               </div>
               <div class="col-xl-6 order-xl-3 col-12 order-3 bg-primary float-left">
                   Buy Box
               </div>
               <div class="col-12 bg-info order-4 float-left">
                   Description
               </div>
               <div class="col-12 bg-info order-5 float-left">
                   Related
               </div>
           </div>
       </div>
       <div class="col-xl-1 d-none d-md-block"></div>
    </div>
</div> 

这篇关于Bootstrap 4 Beta 0网格系统上的行距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！