0

I really need some help. I have 10 item in a row which i want to flow onto 4 line - 3,3,3,1 but that will also need to sometimes be on 3 line 4,4,2.

I have done this successfully for one set but on this set there is an offset of some kind and I can't fix it?

It looks like this: https://dl.dropboxusercontent.com/u/31012350/Screen%20Shot%202015-10-28%20at%2018.59.47.png

Any ideas?

<div class="row">
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
    <a href="#reptiles">
      <div class="animal-menu menu-python"></div>
      <p>Polly the Python</p>
    </a>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
    <a href="#reptiles/1">
      <div class="animal-menu menu-snake"></div>
      <p>Coco the Corn Snake</p>
    </a>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
    <a href="#reptiles/2">
      <div class="animal-menu menu-skink"></div>
      <p>Barry the Berber Skink</p>
    </a>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
    <a href="#reptiles/3">
      <div class="animal-menu menu-dragon"></div>
      <p>Tilly the Thai Water Dragon</p>
    </a>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
    <a href="#reptiles/4">
      <div class="animal-menu menu-frog"></div>
      <p>Toby the tree Frog</p>
    </a>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
    <a href="#reptiles/5">
      <div class="animal-menu menu-salamanda"></div>
      <p>Sally the Salamander</p>
    </a>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
    <a href="#reptiles/6">
      <div class="animal-menu menu-lizard"></div>
      <p>Peter the Plated Lizard</p>
    </a>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
    <a href="#reptiles/7">
      <div class="animal-menu menu-gecko"></div>
      <p>Colin the Crested Gecko</p>
    </a>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
    <a href="#reptiles/8">
      <div class="animal-menu menu-lgecko"></div>
      <p>Larry the Leopard Gecko</p>
    </a>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
    <a href="#reptiles/9">
      <div class="animal-menu menu-tortoise"></div>
      <p>Tommy the Tortoise</p>
    </a>
  </div>

</div>
Danny Willcox
  • 1
  • 1
  • http://codepen.io/anon/pen/ojdMgR Looks good - it must be something with your CSS which you did not show us. – max Oct 28 '15 at 19:16
  • For bootstrap grid problems see this .. [See_This_Link](http://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns/30231976#30231976) ... hope you get the result as you want – User_3535 Oct 30 '15 at 11:48

0 Answers0