Bootstrap 4 图片半页宽

Question

如何制作这样的响应式布局？

我只需要一些技巧就可以了。我不需要完整的源代码。对不起我的英语。

我的代码：

<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 为半页大小。

Answer 1

检查 fiddle 和下面的代码段。它完全响应并且可以在任何设备上工作。

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/

这对你有用...如果需要任何帮助，请检查并告诉我。谢谢

Answer 2

这是你的布局 bootstrap 4. 将图像放入 box--wide 但请记住，粉色 div 是绝对定位的，因此它们不会调整父级的大小 - 它们将占据父级的完整高度，这取决于灰色框中的内容

使其响应 - 我的建议是将图像包装到 .col-12 中，对于桌面设置它定位 static 而图像是 absolute 这样它们将在 [=16] 内对齐=]，而不是 .col-12，在移动设备上图片应该只是 static

.container {
  background: #5f408c;
  padding: 20px;
}
.container h1 {
  text-align: center;
  color: white;
}

.box {
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 40px;
}
.box--wide {
  position: absolute;
  left: 15px;
  right: calc(50% + 15px);
}
.box--wide:last-child {
  right: 15px;
  left: calc(50% + 15px);
}
.box--pink {
  background: #ec008c;
}
.box--gray {
  background: #272827;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-12">
      <h1>TITLE</h1>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="box box--pink box--wide">image</div>
    <div class="col-12 col-md-6 offset-md-6 ">
      <div class="box box--gray">content</div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <div class="box box--gray">content</div>
    </div>
    <div class="box box--pink box--wide">image</div>

  </div>
</div>

Bootstrap 4 图片半页宽

Bootstrap 4 image half page width

html

css

twitter-bootstrap

responsive