Menu
This is my first foray into Twitter Bootstrap. Take a look at this template here: http://twitter.github.com/bootstrap/examples/hero.html
Underneath one of the headings, I'd like to break a long ul into two columns:
*item1 *item4
*item2 *item5
*item3 *item6
It can be two separate <ul>s in the code, it just needs to look like two bulleted columns next to each other.
Can someone recommend a method to me? My problem so far is keeping it responsive to screen size so on narrows screens the two separate lists somewhat stack on each other again.
Thanks!
247
col-sm-4 are available for quickly making grid layouts. Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .
You can use the row-cols-* (eg: row-cols-3 , row-cols-md-3 ) class for your requirement. Save this answer.
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
I would use a fluid grid system inside the span4 div tag. Check out the fluid grid system here... http://getbootstrap.com/css/#grid
Using this method, the lists will stack on each other again when the screen is small.
Here's 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>
this should help in case you have one ul an many li's
css
@media (min-width:768px) {
.col2{ width:100%;}
.col2 li{width:49%; float:left;}
}
html(haml)
.box-body
.row-fluid
%ul.col2.clearfix
[email protected] do |category|
%li
=category.title
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
