jquery - 不考虑页面宽度的背景图像( Bootstrap )

Question

我要疯了。

我正在创建一个包含 4 个盒子的部分，里面装有照片。两个在上面，两个在下面。

为此，我正在使用 Bootstrap 。

这部分打乱了我的布局，我不知道该怎么办了。我找不到错误。

请注意，右侧的框与页面宽度无关。

我正在使用 Bootstrap ，但我已经设置了填充:0;。

HTML:

        <div class="row">
            <div class="col-md-6">
                <div class="booking-photo booking-1 wow bounceInLeft">
                </div>
            </div>
            <div class="col-md-6">
                <div class="booking-photo booking-1 wow bounceInLeft">
                </div>
            </div>
            <div class="col-md-6">
                <div class="booking-photo booking-1 wow bounceInLeft">
                </div>
            </div>
            <div class="col-md-6">
                <div class="booking-photo booking-1 wow bounceInLeft">
                </div>
            </div>
         </div>

CSS:

.booking-2 {
  background: #000;
  position: relative;
  z-index: 3;
}
.booking-2 .col-md-6 {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}
.booking-2 .booking-photo {
  display: block;
  height: 320px;
  background-color: #373c40;
  background-position: 0% 0%;
  background-repeat: repeat;
  background-attachment: scroll;
  text-align: center;
  text-decoration: none;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.booking-2 .booking-1 { background: url('../images/capa.png'); }
.booking-2 .booking-2 { background: url('../images/capa.png'); }
.booking-2 .booking-3 { background: url('../images/capa.png'); }
.booking-2 .booking-4 { background: url('../images/capa.png'); }

http://jsfiddle.net/x908tt16/embedded/result/

Answer 1

<div class="row">
        <div class="col-md-6">
            <div class="booking-photo booking-1 wow bounceInLeft">
            </div>
        </div>
        <div class="col-md-6">
            <div class="booking-photo booking-1 wow bounceInLeft">
            </div>
        </div>
 </div>
 <div class="row">
        <div class="col-md-6">
            <div class="booking-photo booking-1 wow bounceInLeft">
            </div>
        </div>
        <div class="col-md-6">
            <div class="booking-photo booking-1 wow bounceInLeft">
            </div>
        </div>
 </div>

我认为您需要将第 3 和第 4 张图片放在新的一行。