引导程序容器100%

Question

我目前正在将我们现有的商店转换为运行bootstrap。

在产品页面上，我们有一部分图像/图标。它们的布局与以下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

Answer 1

我不知道你想在这里实现什么样的布局，但我猜你想要有一个平行的行，当有足够的水平维度时，简单地说，width:100%元素本身就有很多项。

要做的第一件事

是决定应该在一行中显示多少项。您需要参考Bootstrap grid system。

假设您决定水平显示一行12个项目，并使其具有响应性。然后你可以像下面这样调整你的代码。

警告

正如我在下面的CSS代码部分所评论的，col-md-1是Bootstrap的一个预定义的CSS类。因此，对于Bootstrap element，请确保下面没有这种自定义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>

​