Bootstrap 4网格 - 左边3个堆叠列，右边1个

问题描述 投票：2回答：3

我一直试图获得Bootstrap 4布局，如下所示：

enter image description here

在大型设备上，我需要将搜索表单，CTA和按钮广告放在4列的垂直列中，而内容将占据右侧的所有空间（具有可变内容并且可以根据需要向下扩展）。

对于小型设备，我希望按顺序显示搜索表单，CTA，内容和按钮广告，占用屏幕宽度的100％。

我将使用网格排序类来改变正常流程。但就目前而言，我陷入困境，无法为大型设备提供所需的布局。我尝试过的代码如下所示，但内容总是低于其他项而不是旁边。

这个question似乎解决了这个问题，但推/拉类现在已经消失了？

我的代码（2次尝试）

<div class="row align-items-start">

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: red;"></div>
  </div> 

  <div class="w-100"></div>

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: blue;"></div>
  </div> 

  <div class="w-100"></div>

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: green;"></div>
  </div> 

  <div class="w-100"></div>

  <div  class="col-md-8 offset-md-4">
    <div style="height:50px;width:100%;background-color: yellow;"></div>
  </div> 

</div> 






<div class="row ">

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: red;"></div>
  </div> 

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: blue;"></div>
  </div> 

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: green;"></div>
  </div> 

  <div style='float:right;' class="col-md-8 offset-md-4">
    <div style="height:50px;width:100%;background-color: yellow;"></div>
  </div> 

</div>

css html5 bootstrap-4
3个回答
3
投票

您需要禁用flexbox（d-md-block）并在较大屏幕宽度的列上使用浮动。然后使用flexbox order-*获得更小/移动的屏幕宽度。

<div class="container-fluid">
    <div class="row d-md-block">
        <div class="col-md-4 float-left">
            <div style="height:50px;width:100%;background-color: red;">A</div>
        </div>
        <div class="col-md-8 float-right order-1">
            <div style="height:150px;width:100%;background-color: green;">C</div>
        </div>
        <div class="col-md-4 float-left order-0">
            <div style="height:50px;width:100%;background-color: blue;">B</div>
        </div>
        <div class="col-md-4 float-left order-last">
            <div style="height:50px;width:100%;background-color: yellow;">D</div>
        </div>
    </div>
</div>

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

有关：

Bootstrap with different order on mobile version https://www.codeply.com/go/mKykCsBFDX

A-B-C-D A-C-B-D

1
投票

你可以这样做

.top{
    background-color: yellow;
    height: 50px;
}

.left-side{
    width: 100%;
}

.first{
    background-color: aqua;
}
.second{
    background-color: green;
}

.third{
    background-color: aquamarine;
}



.content{
    height: 300px;
    background-color: grey;
    width: 100%;
   
}

.show-on-small{
    display: none;
}

@media only screen and (max-width: 768px) {
    
     .show-on-small{
        display: block;
    }

    .hide-on-small{
        display: none;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="sty.css">
</head>
<body>

<div class="container-fluid"> 

    <div class="row">
        <div class="col-12 top">
            MD Desktop
        </div>
    </div>

    <div class="row">
 
        <div class="col-md-4">
            <div class="left-side first">SEARCH FORM</div>
            <div class="left-side second">CTAs</div>
            <div class="left-side third hide-on-small">BUTTON ADS</div>
        </div>
        
        <div class="col-md-8">
            <div class="content">CONTENT</div>
        </div>
        
        <div class="col-md-4 show-on-small">
                <div class="left-side third">BUTTON ADS</div>
        </div>
          
    </div>
</div>
    
</body>
</html>
-1
投票

您可以使用flexbox的order属性以您希望的方式进行排序。您可以使用媒体查询在不同视口中实现不同的排序。有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.