所以,我有一个问题,我无法在Google上找到答案,所以我希望你能在这里帮助我.

我有两个横幅,我希望两个图像中的每一个都向左全,右边 – 但文本需要保持在容器大小.

目前我已经制作了一个带有文本的容器,以及一个带有图像的容器流体,在那里我用margin-top属性将其移动了.这对我不起作用.

看我的例子：

这是我不满意的代码

JSfiddle

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.multiBanner {
  position: relative;
  margin: auto;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 0;
}
@media (max-width: 767px) {
  .multiBanner {
    display: none;
  }
}
.multiBanner .treatment {
  height: 575px;
  border-left: 2.5px solid white;
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../img/1.jpeg);
  background-size: cover;
  background-position-y: 65%;
}
@media (max-width: 992px) {
  .multiBanner .treatment {
    height: 650px;
  }
}
.multiBanner .webshop {
  height: 575px;
  border-right: 2.5px solid white;
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../img/2.jpeg);
  background-size: cover;
  background-position-y: 87%;
}
@media (max-width: 992px) {
  .multiBanner .webshop {
    height: 650px;
  }
}
.multiBannerText {
  position: absolute;
  z-index: 1;
  margin: auto;
  top: 200px;
  left: 0;
  right: 0;
}
@media (max-width: 767px) {
  .multiBannerText {
    margin-top: -20px;
    position: relative;
    top: 0;
  }
}
.multiBannerText .col-sm-6:first-child {
  padding-right: 50px;
}
@media (max-width: 767px) {
  .multiBannerText .col-sm-6:first-child {
    padding-right: 15px;
    padding: 50px 15px;
    padding-top: 35px;
    background: #D4CEC0;
  }
}
.multiBannerText .col-sm-6:last-child {
  padding-left: 50px;
}
@media (max-width: 767px) {
  .multiBannerText .col-sm-6:last-child {
    padding-right: 15px;
    padding: 50px 15px;
    padding-top: 35px;
    background: #E6E2D9;
  }
}
.multiBannerText h1 {
  font-family: 'Playfair Display', serif;
  color: #333;
  font-size: 44px;
  line-height: 54px;
  margin-top: 0px;
}
@media (max-width: 767px) {
  .multiBannerText h1 {
    font-size: 28px;
    line-height: 38px;
  }
}
@media (min-width: 768px) {
  .multiBannerText h1 {
    color: white;
  }
}
.multiBannerText p {
  margin-bottom: 50px;
}
@media (min-width: 768px) {
  .multiBannerText p {
    color: white;
  }
}
@media (min-width: 768px) {
  .multiBannerText .line {
    background: white;
  }
}
.multiBannerText .cta {
  background: #b9b28c;
  color: white;
  border-color: #b9b28c !important;
}
.multiBannerText .cta:hover,
.multiBannerText .cta:focus,
.multiBannerText .cta:active {
  background: #b9b28c !important;
  border-color: #b9b28c !important;
  color: white !important;
}

<div class="container multiBannerText">
  <div class="row">

    <div class="col-sm-6">
      <h1>Bestil vores unikke hårprodukter i webshoppen</h1>
      <div class="line"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat facilisis tellus, vel lobortis ipsum efficitur sed. Mauris interdum elementum dui et dignissim.</p>
      <button type="button" class="btn btn-default cta hvr-float">Gå til webshoppen</button>
    </div>

    <div class="col-sm-6 animated fadeInRight">
      <h1>Markedets bedste hårbehandlinger - dokumenteret</h1>
      <div class="line"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat facilisis tellus, vel lobortis ipsum efficitur sed. Mauris interdum elementum dui et dignissim.</p>
      <button type="button" class="btn btn-default cta hvr-float">Sådan foregår behandlingen</button>
    </div>

  </div>
</div>

<div class="container-fluid multiBanner">
  <div class="row">

    <div class="col-sm-6 webshop"></div>
    <div class="col-sm-6 treatment"></div>

  </div>
</div>

最佳答案 这是我的问题响应式布局版本.

>我已将每个文本与其图像放在同一单元格中.这些细胞相对定位.
>我用col-sm-6类将每个文本包装到div中.我将这些div包装成宽度固定的容器.这些容器绝对定位.
>当屏幕宽度小于481像素时,文本的每个部分都位于其图像下方.

请检查结果：jsfiddle•codepen

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.col-xs-12 {
  background: #9c6;
  margin-bottom: 12px;
  margin-top: 12px;
  min-height: 200px;
}
.half-left  img,
.half-right img {
  height: auto;
  width: 100%;
}
@media (min-width: 481px) {
  .half-left,
  .half-right {
    overflow: hidden;
    padding: 0;
    position: responsive;
  }
  .half-left  > .container,
  .half-right > .container {
    position: absolute;
    top: 0;
  }
  .half-left  > .container { right: 0;}
  .half-right > .container { left: 0; }
}

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h2>The beginning</h2>
      <p>... is in the container</p>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 half-left">
      <img src="//placehold.it/800x600/c69/f9c/?text=Left%20Image" alt="">
    
      <div class="container">
        <div class="row">
          <div class="col-sm-6 col-sm-offset-6">
            <h2>The left half</h2>
            <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
          </div>
        </div>
      </div>
      
    </div>
    <div class="col-sm-6 half-right">
      <img src="//placehold.it/800x600/69c/9cc/?text=Right%20Image" alt="">

      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <h2>The right half</h2>
            <p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h2>The ending</h2>
      <p>... is in the container again</p>
    </div>
  </div>
</div>