Responsive Bootstrap - changing number of divs per row from desktop to mobile

时间:2015-06-25 18:56:58

标签: css twitter-bootstrap

New to responsive bootstrap here. I have 2 div's per row and 2 rows showing on my desktop. I used display: inline-block (see below link): https://jsfiddle.net/9ya7kb67/ HTML: <div class="parent"> <div class="child"> content </div> <div class="child"> content </div> <div class="child"> content </div> <div class="child"> content </div> </div> CSS: .parent { width: 200px; } .child { display: inline-block; width: 80px; } However, I'd like to keep this layout in desktop but change it to 1 div per row (for 4 rows) on mobile using responsive bootstrap. How can I do this?

1 个答案:

答案 0 :(得分:3)

Check the bootstrap documentation for its grid system here: http://getbootstrap.com/css/#grid-example-mixed-complete There are 4 different types of classes col-sm col-xs col-md col-lg each one fitted for different screen sizes and you can combine them to make dynamic grids for your site. <div class="row"> <div class="col-xs-12 col-md-6">Test col</div> <div class="col-xs-12 col-md-6">Test col</div> <div class="col-xs-12 col-md-6">Test col</div> <div class="col-xs-12 col-md-6">Test col</div> </div> I didn't exactly understand what your end goal is, but the code above is something similar to what you want. On small screens col-xs-12 will fill the entire row, on medium to large screen you will have two col-md-6 on each row. Make sure to read the bootstrap documentation to learn more about it.