文章/答案/技术大牛

发布

社区首页 >问答首页 >不考虑页面宽度的背景图像(引导)

问不考虑页面宽度的背景图像(引导)
EN

Stack Overflow用户

提问于 2014-11-28 11:16:18

回答 2查看 114关注 0票数 0

我快要发疯了。

我正在创建一个有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/

css

twitter-bootstrap

frontend

jquery

html

回答 2

Stack Overflow用户

发布于 2014-11-28 11:19:12

<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>

我相信你需要把第三张和第四张图片放在新的一行上。

票数 0

Stack Overflow用户

发布于 2014-11-28 14:03:58

尝试我的解决方案

我做了两件事

我已经把最后两张图片放在一个新的<div class="row">

I中，通过添加两个自定义类来修改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;

以下是更新后的

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27181389

复制

相似问题

问不考虑页面宽度的背景图像(引导)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不考虑页面宽度的背景图像(引导)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不考虑页面宽度的背景图像(引导)
EN