All geek questions in one place

Two columns Bulleted Lists in Responsive Twitter Bootstrap

This is my first Twitter Bootstrap foray. Take a look at this template here: http://twitter.github.com/bootstrap/examples/hero.html

Under one of the headings, I would like to split the long ul into two columns:

* item1 * item4
* item2 * item5
* item3 * item6

There may be two separate <ul> in the code, they just have to look like two marked columns next to each other.

Can someone recommend me a method? My problem still holds it in response to screen size, so on narrow screens two separate lists are somewhat stacked on top of each other.

Thanks!

+6
source share
2 answers

I use the fluid system inside the span4 div tag. Check the fluid grid system here ... http://getbootstrap.com/css/#grid

Using this method, the lists will be stacked on top of each other when the screen is small.

Here is an example ...

 <html> <head> <title></title> <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> </head> <body> <div class="container"> <div class="row"> <div class="span4"> <h4>Column 1</h4> <div class="container-fluid"> <div class="row-fluid"> <div class="span6"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> <div class="span6"> <ul> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> </div> </div> </div> </div> <div class="span4"> <h4>Column 2</h4> </div> <div class="span4"> <h4>Column 3</h4> </div> </div> </div> </body> </html>
+8
source

this should help if you have one ul function li

CSS

  @media (min-width:768px) { .col2{ width:100%;} .col2 li{width:49%; float:left;} }

HTML (Haml)

  .box-body .row-fluid %ul.col2.clearfix -@categories.each do |category| %li =category.title
+1
source

Source: https://habr.com/ru/post/919004/

More articles:


All Articles