我正在将我们现有的商店转换为运行引导程序。
在产品页面上，我们有一段图像/图标。它们的布局如下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
答案 0 :(得分：0)
我不知道你想在这里实现什么样的布局，但我想你想要一个平行的行，当有足够的水平尺寸时，它取整行，简单地说，width:100%元素那个本身就有很多物品。
要做的第一件事
决定一行中应显示的项目数。您需要参考Bootstrap grid system。
假设您决定水平连续显示12个项目并使其响应。然后你可以调整你的代码，如下所示。
警告
正如我在CSS代码部分中评论的那样，col-md-1是Bootstrap的预定义CSS类。所以 确保您没有以下类型的自定义CSS用于Bootstrap元素 。它可能会严重损害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>