响应式背景-url in Bootstrap Col div empty

Question

我现在正在为客户建立网站。我过去使用过 Bootstrap，所以我对如何设置响应式网格比较熟悉。

这是我的问题。客户希望对一些 div 进行动画处理。所以我打算用 CSS3 来做到这一点。因为我希望能够将元素叠加在一起，所以我想我首先将 div 的 BG 设置为堆栈中的第一张图像。

好吧，问题来了。我有四个 col div 像这样并排在一起。

<div class="row center-block">    
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 " >
      <div id="buttonWrapper1"></div>
    </div>
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 ">
        <div id="buttonWrapper2"></div>
    </div>
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 ">
         <div id="buttonWrapper3"></div>
    </div>
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 ">
         <div id="buttonWrapper4"></div>
    </div>
</div>

我的 CSS 看起来像这样

#buttonWrapper1 {   
    background-image: url(../img/image-button-01.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

#buttonWrapper2 {   
    background-image: url(../img/image-button-02.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

#buttonWrapper3 {
    background-image: url(../img/image-button-03.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

#buttonWrapper4 {   
    background-image: url(../img/image-button-03.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

问题是什么都没有出现，除非我明确设置了高度和宽度。我不想这样做，因为这应该是一个响应式网格。

当我这样做时，max-width: 300px; height: 300px; 该行开始向下扩展（这意味着它填充了该行的底部）。（我不想要那个）。当我尝试设置 background-size: contain; 时，这种方法有效，但仍会填充行的底部。当我设置 background-size: cover 时，它会吹掉所有列，看起来很乱。

有什么办法解决这个问题吗？我只想能够设置 divs 的 BG 图像并让它们按比例缩放。

提前致谢。我应该尝试不同的方法吗，我可以起诉 JavaScript 来解决这个问题吗？

Answer 1

我在这里工作： https://codepen.io/anon/pen/vNpYeR

代码有点乱，但你应该明白了。这里唯一需要注意的是，您必须设置行的硬高度，否则 children 将不知道要渲染的维度：

<div class="row center-block">    
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 " >
      <div id="buttonWrapper1"></div>
    </div>
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 ">
        <div id="buttonWrapper2"></div>
    </div>
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 ">
         <div id="buttonWrapper3"></div>
    </div>
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 ">
         <div id="buttonWrapper4"></div>
    </div>
</div>



.row { height:100px; }
.col-xs-12 { width:25%; height:100%; position:absolute; float:left; position:relative; }


#buttonWrapper1 {
  height:100%;
    background-image: url('http://i.telegraph.co.uk/multimedia/archive/02830/cat_2830677b.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
}

#buttonWrapper2 {
  height:100%;
    background-image: url('http://i.telegraph.co.uk/multimedia/archive/02830/cat_2830677b.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
}

#buttonWrapper3 {
  height:100%;
    background-image: url('http://i.telegraph.co.uk/multimedia/archive/02830/cat_2830677b.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
}

#buttonWrapper4 { 
  height:100%;
    background-image: url('http://i.telegraph.co.uk/multimedia/archive/02830/cat_2830677b.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
}

Answer 2

非常感谢。是的，我根据您的建议找到了类似的解决方案。基本上我使用自定义 class 来覆盖每个断点的默认 col-xs-12 高度。

随着浏览器的缩放，我只设置了高度。正如您所说，您必须设置行的硬高度，否则 children 将不知道要调整多少。

所以看起来像这样：

@media only screen and (min-width : 320px) {
    .custom-height{height: 320px !important;} 
}

 <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 custom-height">        
 <div id="buttonWrapper1"></div></div>

不是 100% 但现在好多了

响应式背景-url in Bootstrap Col div empty

Responive background-url in Bootstrap Col div empty

background-image

responsive-design

twitter-bootstrap