不尊重页面宽度的背景图像（bootstrap）

Question

我疯了。

我正在创建一个包含4个包含照片的方框。两个在顶部，两个在下面。

为此我正在使用引导程序。

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

请注意，右侧的框不符合页面宽度。

我正在使用bootstrap，但我已经设置了padding：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张图片放在新行上。

Answer 2

尝试我的解决方案

我做了两件事

• 我已将最后两张图片放入新的<div class="row">
• 我通过添加两个自定义类来修改CSS以实现结果

删除

.booking-2 .col-md-6 {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

加

        .leftColumn {
            padding-right: 0px;
        }
        .rightColumn {               
            padding-left: 0px;

以下是更新的 Fiddle