仅使用Bootstrap 4的实用程序

Question

我正在尝试创建3个盒子，旁边有一个大盒子和两个小盒子。在每个盒子里我都有图像。问题是这两个小盒子在任何设备上都没有响应，可以正常工作桌面。我真的迷路了，无法找出我做错了什么，并且从昨天开始一直在努力。

.fashion_look img {
  width: 100%;
  display: inline;
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;
}

.main-container .block-container .fashion_look .content {
  position: absolute;
  top: 5%;
  left: 0%;
  width: 100%;
  text-align: center;
  padding: 0 35px;
}

.main-container .block-container {
  display: inline-block;
  width: 100%;
  float: left;
}

.main-container .widget-static-block {
  display: block;
  overflow: hidden;
  padding-top: 60px;
}

.main-container .block-container .banner_top,
.main-container .block-container .new_shoes,
.main-container .block-container .fashion_look {
  position: relative;
  overflow: hidden;
}

.main-container .block-container .overlay {
  bottom: 0;
  height: auto;
  left: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.2s ease-in-out 0.1s;
  -moz-transition: all 0.2s ease-in-out 0.1s;
  -webkit-transition: all 0.2s ease-in-out 0.1s;
  -o-transition: all 0.2s ease-in-out 0.1s;
  width: auto;
  z-index: 2;
}

.main-container .block-container .new_shoes .content {
  position: absolute;
  top: 10%;
  left: 0%;
  width: 60%;
  text-align: center;
  padding: 0 35px;
}

<div class="widget widget-static-block">
  <div class="block-container">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="fashion_look">
        <div class="overlay">&nbsp;</div>
        <a href="https://www.acureorganics.com/skin.html"><img src="#></a><br>
        <div class="content">
          <h3>&nbsp;</h3>
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="new_shoes">
            <div class="overlay">&nbsp;</div>
            <img src="#">
            <div class="content">&nbsp;</div>
          </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="overlay">&nbsp;</div>
          <div class="banner_top">
            <a href="https://www.acureorganics.com/body.html"><img src="#"></a>
          </div>
          <div class="banner_top">
            <div class="content">&nbsp;</div>
            <div class="content">&nbsp;</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

问题在于，当屏幕较小时，两个小框中的图像无法正确缩放，并且无法容纳在同一行上。

如果我添加此CSS，它将起作用：

img {
  width: 100%;
  height: auto;
}

看看这个fiddle。

Answer 2

仅使用Bootstrap 4的实用程序

我不确定您希望侧面部分显示在移动设备上的哪个位置，因此此处显示在主要部分的下方。请注意，添加bg-color只是为了清楚每个部分的外观。

body, html{
  height:100%;
  }
  
  
  .container-fluid,
  .container-fluid .row{
    height:100%;}

<link href="https://unpkg.com/bootstrap@4.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-md-8 bg-primary text-white">
      <h2>Main Column</h2>
    </div>
    <div class="col-12 col-md-4">
      <div class="row px-md-3">
        <div class="col-12 mb-md-3 bg-dark text-white">
          Top Secret
        </div>
        <div class="col-12 bg-warning">
          Bottom Secret
        </div>
      </div>
    </div>
  </div>
</div>

如果您想使用其他自定义CSS（或网格设置）查看另一种实现，请告诉我。

如何创建3个不同大小的盒子？

2 个答案:

仅使用Bootstrap 4的实用程序