我目前正在将现有商店转换为运行引导程序。
在产品页面上，我们有一部分图像/图标。它们的布局与以下CSS相同
.ts-2 {
text-align: left;
width: 318px;
}
.ts-2-2 {
float: left;
margin-top: 2px;
padding: 2px;
width: 70px;
text-align:center;
}
.gen-2 {
margin-bottom: 0px;
margin-top: 0px;
font-size:10px;
}
在我们当前的站点上运行良好。但我想将它们放入新站点中宽度为100％的自适应容器中。
目前还没有发生
您可以在这里看到我的意思。
https://www.fireworkscrazy.co.uk/store_v8/shopexd.asp?id=848
最佳答案
我不知道您想在这里实现哪种布局，但是我想您想有一个平行的行，当水平尺寸足够大时，简单地放置width:100%元素，该行包含整行在自身。
第一件事
是确定应在一行上显示多少个项目。您需要参考Bootstrap grid system。
假设您决定水平连续显示12个项目并使之响应。然后您可以像下面那样调整代码。
警告
正如我在下面的CSS代码部分中所述，col-md-1是Bootstrap的预定义CSS类。因此，请确保下面没有用于Bootstrap元素的自定义CSS。它可能会严重损害Bootstrap的响应功能。
希望这会帮助您或至少给您一些想法，以实现您想要的。
$(document).ready(function() {
$('#shrink').click(function(e) {
$('#virtualBody').css('width', '70%');
});
$('#expand').click(function(e) {
$('#virtualBody').css('width','100%');
});
})/* normally you don't need to define below css stub
* because bootstrap already has this property according to your screen or device sizes.
* Somehow linking the css doesn't work properly.
* So I added this col-md-1 here.
*/
.col-md-1 {
width:8.33333333%;
float:left;
}
/* col-md-1 custom css ended */
.ts-2-2 {
text-align:center;
}
/* */
.ts-2-2 img {
max-width:100%;
height:auto;
display:block;
}
.gen-2 {
margin-bottom: 0px;
margin-top: 0px;
font-size:10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="virtualBody">
<div class="row">
<div class="col-md-1">
<div class="ts-2-2">
<p class="gen-2">
Category<br/>
<img border="0" src="https://www.fireworkscrazy.co.uk/images/icons/safety_8.gif" alt="Category 2 :: 8 Metres" title="Category 2 :: 8 Metres">
8 Metres
</p>
</div>
</div>
<div class="col-md-1">
<div class="ts-2-2">
<p class="gen-2">
Category<br/>
<img border="0" src="https://www.fireworkscrazy.co.uk/images/icons/safety_8.gif" alt="Category 2 :: 8 Metres" title="Category 2 :: 8 Metres">
8 Metres
</p>
</div>
</div>
<div class="col-md-1">
<div class="ts-2-2">
<p class="gen-2">
Category<br/>
<img border="0" src="https://www.fireworkscrazy.co.uk/images/icons/safety_8.gif" alt="Category 2 :: 8 Metres" title="Category 2 :: 8 Metres">
8 Metres
</p>
</div>
</div>
<div class="col-md-1">
<div class="ts-2-2">
<p class="gen-2">
Category<br/>
<img border="0" src="https://www.fireworkscrazy.co.uk/images/icons/safety_8.gif" alt="Category 2 :: 8 Metres" title="Category 2 :: 8 Metres">
8 Metres
</p>
</div>
</div>
<div class="col-md-1">
<div class="ts-2-2">
<p class="gen-2">
Category<br/>
<img border="0" src="https://www.fireworkscrazy.co.uk/images/icons/safety_8.gif" alt="Category 2 :: 8 Metres" title="Category 2 :: 8 Metres">
8 Metres
</p>
</div>
</div>
<div class="col-md-1">
<div class="ts-2-2">
<p class="gen-2">
Category<br/>
<img border="0" src="https://www.fireworkscrazy.co.uk/images/icons/safety_8.gif" alt="Category 2 :: 8 Metres" title="Category 2 :: 8 Metres">
8 Metres
</p>
</div>
</div>
<div class="col-md-1">
<div class="ts-2-2">
<p class="gen-2">
Category<br/>
<img border="0" src="https://www.fireworkscrazy.co.uk/images/icons/safety_8.gif" alt="Category 2 :: 8 Metres" title="Category 2 :: 8 Metres">
8 Metres
</p>
</div>
</div>
<div class="col-md-1">
<div class="ts-2-2">
<p class="gen-2">
Category<br/>
<img border="0" src="https://www.fireworkscrazy.co.uk/images/icons/safety_8.gif" alt="Category 2 :: 8 Metres" title="Category 2 :: 8 Metres">
8 Metres
</p>
</div>
</div>
<div class="col-md-1">
<div class="ts-2-2">
<p class="gen-2">
Category<br/>
<img border="0" src="https://www.fireworkscrazy.co.uk/images/icons/safety_8.gif" alt="Category 2 :: 8 Metres" title="Category 2 :: 8 Metres">
8 Metres
</p>
</div>
</div>
<div class="col-md-1">
<div class="ts-2-2">
<p class="gen-2">
Category<br/>
<img border="0" src="https://www.fireworkscrazy.co.uk/images/icons/safety_8.gif" alt="Category 2 :: 8 Metres" title="Category 2 :: 8 Metres">
8 Metres
</p>
</div>
</div>
<div class="col-md-1">
<div class="ts-2-2">
<p class="gen-2">
Category<br/>
<img border="0" src="https://www.fireworkscrazy.co.uk/images/icons/safety_8.gif" alt="Category 2 :: 8 Metres" title="Category 2 :: 8 Metres">
8 Metres
</p>
</div>
</div>
<div class="col-md-1">
<div class="ts-2-2">
<p class="gen-2">
Category<br/>
<img border="0" src="https://www.fireworkscrazy.co.uk/images/icons/safety_8.gif" alt="Category 2 :: 8 Metres" title="Category 2 :: 8 Metres">
8 Metres
</p>
</div>
</div>
</div>
</div>
<h3>See shrink and expand</h3>
<button id="shrink">shrink</button>
<button id="expand">expand</button>关于css - 自举容器100％，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30019682/