Question

我很难用Bootstra-4 .container类在1-left-side-full-image.jpg上开发类似的东西。

我已经说明了目标（1-left-side-full-image.jpg）的问题（2-background-image-outside-container.jpg，3-container-fluid.jpg，仅4-container）。 jpg）

Well Here's a codepen link https://codepen.io/srmahmud2/pen/vaONJQ

Answer 1

您想做这样的事情吗？

您可以通过组合背景图像和线性渐变来实现。

section {
    background: linear-gradient(to right, transparent 50%, #fff 50%), 
        url('https://images.pexels.com/photos/731082/pexels-photo-731082.jpeg?
            auto=compress&cs=tinysrgb&dpr=2&h=650&w=940') no-repeat top left;
    background-size: cover;
}

这里的想法是先加载具有线性渐变的背景，左侧填充50％的透明度，右侧填充50％的白色，然后加载背景图像。

<section>
    <div class="container">
       <div class="row">
           <div class="col-sm-6 offset-sm-6">
               ...
           </div>
       </div>
    </div>
</section>

小提琴： http://jsfiddle.net/aq9Laaew/94438/

这种方法最酷的地方是，您可以在linear-gradient()中插入一定角度以形成更酷的背景（IMO），如下所示：

只需更改linear-gradient()函数

background: linear-gradient(135deg, transparent 50%, #fff 50%),
    url('https://images.pexels.com/photos/731082/pexels-photo-731082.jpeg?
        auto=compress&cs=tinysrgb&dpr=2&h=650&w=940') no-repeat top left;

Answer 2

在container内，col-6的最大宽度为540px。

在此部分使用container-fluid。
将右列的最大宽度限制为col-6列在container内部可以具有的最大宽度。
删除右列的填充。
在行中使用align-items-center。
其余的代码使用container。

.mw-540px {
  max-width: 540px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row  align-items-center">
    <div class="col-6 p-0">
      <img src="https://source.unsplash.com/user/fuyao/likes" alt=""  class="img-fluid">
    </div>
    <div class="col-6 pt-5">
      <div class="mw-540px">
        <div>
          <h3>Contact Us</h2>
            <p class="small">
              Vestibulum venernatis id ex eu dapibus. Suspendisse sit amet justa leo. Curabitur ornare tacus erat, ac interdum liguta consequat ut. Fusce id tellus ac ante feugiat porta.
            </p>
        </div>
        <div class="d-flex justify-content-between">
          <p>
            <i class="fa fa-phone fa-fw"></i> +1234567890
          </p>
          <p>
            <i class="fa fa-email fa-fw"></i> ABC@ABC.COM
          </p>
        </div>
        <form>
          <div class="form-row">
            <div class="form-group col-sm-6">
              <input type="text" class="form-control" placeholder="First Name" />
            </div>
            <div class="form-group col-sm-6">
              <input type="text" class="form-control" placeholder="Last Name" />
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-sm-6">
              <input type="text" class="form-control" placeholder="Email" />
            </div>
            <div class="form-group col-sm-6">
              <input type="text" class="form-control" placeholder="Cell" />
            </div>
          </div>
          <div class="form-group">
            <textarea class="form-control" rows="5" placeholder="Message"></textarea>
          </div>
          <button type="submit" class="btn btn-success">Send</button>
        </form>
      </div>
    </div>
  </div>
  <div class="container mt-5">
    <div class="row">
      <div class="col">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur rerum numquam voluptatibus cum! Impedit dolore hic repellendus, itaque rem perferendis vitae similique, voluptatum debitis dolorem ex quaerat eligendi vel qui? Lorem, ipsum dolor sit amet
        consectetur adipisicing elit. Eius ad accusantium assumenda deleniti neque quia voluptatibus optio cumque reiciendis numquam labore placeat sunt et architecto natus, delectus adipisci odit nobis? Quasi nesciunt rerum odit aliquam totam. Harum,
        et! Voluptas omnis animi sequi id officia ipsum, nihil repellendus officiis ratione eum nostrum expedita culpa delectus laboriosam explicabo consequuntur aut ab ad? Magnam voluptate quam tenetur minima. Voluptas nam odit dolores, similique earum
        obcaecati quo alias maiores harum necessitatibus eveniet, consectetur ipsa expedita sunt corporis, explicabo corrupti temporibus? Qui ipsa officia dignissimos?
      </div>
      <div class="col">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur rerum numquam voluptatibus cum! Impedit dolore hic repellendus, itaque rem perferendis vitae similique, voluptatum debitis dolorem ex quaerat eligendi vel qui? Lorem, ipsum dolor sit amet
        consectetur adipisicing elit. Eius ad accusantium assumenda deleniti neque quia voluptatibus optio cumque reiciendis numquam labore placeat sunt et architecto natus, delectus adipisci odit nobis? Quasi nesciunt rerum odit aliquam totam. Harum,
        et! Voluptas omnis animi sequi id officia ipsum, nihil repellendus officiis ratione eum nostrum expedita culpa delectus laboriosam explicabo consequuntur aut ab ad? Magnam voluptate quam tenetur minima. Voluptas nam odit dolores, similique earum
        obcaecati quo alias maiores harum necessitatibus eveniet, consectetur ipsa expedita sunt corporis, explicabo corrupti temporibus? Qui ipsa officia dignissimos?
      </div>
    </div>
  </div>

https://codepen.io/anon/pen/OwyRLL

请记住，我曾经使用过Unsplash张照片。其中一些可能具有很大的高度。在这种情况下，刷新页面。

Answer 3

问题解决了。请检查上方或此处的Codepen链接。 link
的HTML

<h1 class="text-center">Split half width Background iamge <br>till edge of the screen.</h1>
<section>
  <div class="img-wrapper"></div>
  <div class="container">
    <div class="row">
      <div class="offset-sm-6 col-sm-6">
        <div class="text-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit iusto adipisci, perspiciatis quo animi vel eum dicta id ut asperiores, consequuntur nostrum tenetur sapiente. Neque incidunt ullam minima eius repudiandae, atque deleniti! Pariatur ea doloremque ex optio ducimus dicta alias!</p>
          <p>Id quot maiestatis vix. Putent virtute iracundia no duo. Eum debitis qualisque deseruisse ei, te nec omnis verear virtute. Te recusabo explicari deterruisset vim. Eu perfecto consequuntur mel, ex mea blandit verterem temporibus. Mei tota definiebas ne</p>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="text-center">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>The End</h2>
            </div>
        </div>
    </div>
</section>

CSS

h1{
  margin:20px;
  font-weight:bold;
}
section{
  padding:30px 0;
  position:relative;
  margin-bottom:80px;
  overflow:hidden;
}
div.img-wrapper{
  background-image: url("https://images.pexels.com/photos/1229846/pexels-photo-1229846.jpeg?auto=compress&cs=tinysrgb&h=650&w=940");
    min-height: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
/*   change the left side image width as like you want */
    width: 41.66667%;
    left: 0;
}
p{
  padding: 20px;
}

我在这里所做的是
1.我在.container课前放了一个div，并将其设置为position：absolute;
2.但在此之前，将包装部分设置为相对：
3.将其设置为所需的宽度，在这种情况下，宽度为Bootstrap .col-5 = 41.666667％；

这些是主要要点，您可以随意设计。

@mahan请参见下面的图像，在您的情况下，背景图像不能覆盖整个空间，尤其是它应占据整个屏幕并立即从内容的左侧开始。

@ david-liang对不起，我有话要说它是什么。但是在您的情况下，图像覆盖了整个区域，但是似乎部分可见。

好吧，我们可能会将其余的留给访客来决定哪一个是正确的。

在所有情况下，这里的比较图像看起来如何。

干杯！

使用Bootstrap-4垂直分割屏幕的一半，以显示图像直到屏幕边缘

3 个答案: