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

检查下面的小提琴和摘录。它具有完全响应能力，并且可以在任何设备上运行。

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

这是带有引导程序4的布局。将图片放入box--wide，但请记住，粉色div的位置绝对正确，因此它们不会调整父级的大小-它们将采用父级的完整高度，具体取决于灰色框中的内容

要对此做出响应-我的建议是将图像包装到.col-12中，对于台式机，将图像放置在static中，将其放置在absolute中，以便它们在.container内对齐，而不是.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图片半页宽度

2 个答案: