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非常相似。 –