Bootstrap 4 Beta 0 网格系统上的行跨度

Posted 2023-03-05

【中文标题】Bootstrap 4 Beta 0 网格系统上的行跨度

【英文标题】：Rowspan on Bootstrap 4 Beta 0 Grid System

【发布时间】：2018-02-04 22:26:37

【问题描述】：

您好，我正在开发一个使用 Bootstrap 4 Beta 的电子商务模板。我让它在移动设备上工作，但在桌面上我不知道如何让 Buy Box 保持在标题下。在我的方法中，它出现在“图库”部分下。

所需的桌面

所需的手机

<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>

【参考方案1】：

您可以使用实用程序类来浮动xl 宽度上的列，这将导致“Best Buy”框在标题下方移动，假设画廊的高度更高。

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> 

【讨论】：

嗨@ZimSystem，我尝试了我的布局，效果很好。感谢您的关注和快速答复。