时间戳

首页 > 解决方案 > Bootstrap 4图像半页宽度

html - Bootstrap 4图像半页宽度

问题描述

我怎样才能做出这样的响应式布局？布局

我只需要一些提示。我不需要完整的源代码。对不起我的英语不好。

我的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <img src='https://via.placeholder.com/350x150' />
    </div>
    <div class="col-md-6">
      CONTENT
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      CONTENT
    </div>
    <div class="col-md-6">
      <img src='https://via.placeholder.com/350x150' />
    </div>
  </div>
</div>

我希望 img 是半页大小。

标签： htmlcsstwitter-bootstrapresponsive

解决方案

检查下面的小提琴和片段。它是完全响应的，它可以在任何设备上工作。

body {
  padding:15px 0;
}
.content-box {
  position:relative;
  width:100%;
  min-height:350px;
  background:#ccc;
  margin:15px 0;
}

.img-box.left {
  position:absolute;
  top:-15px;
  right:-15px;
  bottom:-15px;
  width:calc( 50vw - 15px );
  background:red;
}

.img-box.right {
  position:absolute;
  top:-15px;
  left:-15px;
  bottom:-15px;
  width:calc( 50vw - 15px );
  background:red;
}

@media only screen and (max-width: 768px) {
    .img-box.left, .img-box.right  {
      position:absolute;
      top:0px;
      left:0px;
      right:0px;
      bottom:0px;
      width:100%;
      background:red;
    }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class=container>
  <div class="row">
    <div class="col-md-6">
      <div class="content-box">
        <div class="img-box left">
        image
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="content-box">

      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="content-box">

      </div>
    </div>
    <div class="col-md-6">
      <div class="content-box">
         <div class="img-box right">
        image
        </div>
      </div>
    </div>
  </div>
</div>
</body>

https://jsfiddle.net/Sampath_Madhuranga/tfz87bqe/18/

这对你有用......检查并让我知道是否需要任何帮助。谢谢。

推荐阅读