Bootstrap多个cols不起作用

时间:2016-12-20 01:27:19

标签: html twitter-bootstrap grid

因此,当我为我的imgs标签键入多个cols时,只有md一个正在工作。 这是如何结构化的:enter image description here

这就是lg屏幕的样子:enter image description here

2 个答案:

答案 0 :(得分:0)

每行中的列数必须为12。还要为图像使用img-responsive类。 http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

请检查此代码     codepen.io/payalpatel2299/pen/dOaLgd

答案 1 :(得分:0)

在每个class="row"之间,段的总和应为12.请注意以下代码......

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>