0
我试图复制eBay的“今日”特色卖方布局与4方形图像组成一个盒子（见图片），但使用Bootstrap。我真的很难理解我如何才能做到这一点。我可以或多或少地获得正方形，并且在lg，md和sm规则上看起来不错，因为当然事情不需要按比例放置，我可以每个方格都固定宽度和高度。但是，当涉及到移动设备时，由于需要根据窗口大小调整窗口大小，因此会熄灭该窗口。4个图像的响应式网格
，我已经想出了目前的HTML基本上是一个网格分成9和3，（COL-XS-9和Col-XS-3），用一套高度给出在每个桌面/平板电脑宽度。
图像有时会是平方图像，其他时候它们将是横向或纵向格式的图像，在这种情况下，它们将保持纵横比并扩展到其最大尺寸，但在包含div的范围内。
有没有一种方法，我可以实现这个使用Bootstrap或我需要看看替代品使用JavaScript例如？下面
代码，以防万一，你需要看一看：
HTML
<div id="featured-merchant-container">
<div class="featured-merchant-listings">
<div class="row">
<div class="primary-img-container col-xs-9 col-sm-9 col-md-9 col-lg-9 no-padding-right">
<div class="big-hero-image">
<a ng-if="merchant.userListings[0].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="{{merchant.userListings[0].primaryImage}}" />
</span>
</a>
<a ng-if="!merchant.userListings[0].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="img/placeholder.png" />
</span>
</a>
</div>
</div>
<div class="secondary-img-container col-xs-3 col-sm-3 col-md-3 col-lg-3 no-padding-left">
<div class="big-hero-images">
<div class="first">
<a ng-if="merchant.userListings[1].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="{{merchant.userListings[1].primaryImage}}" />
</span>
</a>
<a ng-if="!merchant.userListings[1].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="img/placeholder.png" />
</span>
</a>
</div>
<div class="second">
<a ng-if="merchant.userListings[2].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="{{merchant.userListings[2].primaryImage}}" />
</span>
</a>
<a ng-if="!merchant.userListings[2].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="img/placeholder.png" />
</span>
</a>
</div>
<div class="last">
<a ng-if="merchant.userListings[3].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="{{merchant.userListings[3].primaryImage}}" />
</span>
</a>
<a ng-if="!merchant.userListings[3].primaryImage" ng-href="/#!/users/{{merchant._id}}">
<span class="thumb">
<img ng-src="img/placeholder.png" />
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
CSS：
#featured-merchant-container {
border: 1px solid green-grey;
.big-hero-image {
text-align:center;
.thumb {
display:block;
border-right:1px solid green-grey;
height:413px;
display:table-cell;
vertical-align:middle;
text-align:center;
img {
width:100%;
height:413px;
}
}
}
.big-hero-images {
text-align:center;
// border-left:1px solid green-grey;
.thumb {
display:block;
height:137px;
display:table-cell;
vertical-align:middle;
text-align:center;
img {
width:100%;
height:137px;
}
}
.first, .second {
border-bottom:1px solid green-grey;
}
}
}
请帮助我。这是推动我疯了:(。谢谢！
嵌套的CSS是不是有效的CSS是这个SASS（http://sass-lang.com）或LESS（http://lesscss.org）？ –
道歉，这是手写笔https://learnboost.github.io/stylus/，但这与LESS和SASS非常相似。 –