Ben,
Here's one way to approach it:
http://jsfiddle.net/gruskada/88vpa/25/
I used Chrome's dev tool (F12), then right-clicked on your div with
"class5" to see what Bootstrap styles were being used. It came back with
this:
[class*="span"],
.uneditable-input[class*="span"],
.row-fluid [class*="span"] {
display: block;
float: none;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
This is inside a media query specifying the max width, so you'd need to
override that as well in your own CSS file, i.e. :
@media (min-width: 480px) and (max-width: 767px) {
[class*="span"], .uneditable-input[class*="span"],
.row-fluid[class*="span"] {
width:auto !important;
float:left !important;
}
}
So this now keeps the side-by-side formatting until you are down to a very
small sized screen.
As an aside, I thought "!important" wouldn't be needed, since it was a user
stylesheet, but it appears that it is necessary. Also, does anyone know of
a better way to do this? It doesn't feel quite right to me to have to
override media queries in Bootstrap.
Dave
On Sunday, February 3, 2013 7:43:41 AM UTC-5, Ben Mildren wrote:
>
> Hi,
>
> I'm building a website with the latest version of Bootstrap, mostly going
> fine besides a few small gripes.
>
> The major one being my lists. I have two lists which work fine down to
> 768px wide. After that, they stack even where there is plenty of space for
> them to appear inline.
>
> It's just an annoying little thing that I want sorted.
>
> Code for my lists:
>
>
> <!DOCTYPE html>
>
> <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
> <link href="css/bootstrap-responsive.css" rel="stylesheet"
> type="text/css">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>AGHicks Homepage</title>
> <link href="css/stylesheet.css" rel="stylesheet"
> type="text/css"></head><body>
>
> <div class="row-fluid">
> <div class="span5">
> <ul>
> <li><strong>Conservatories</strong></li>
> <li><strong>Extensions</strong></li>
> <li><strong>Window & Door Refits</strong></li>
> <li><strong>Bricklaying</strong></li>
> <li><strong>Driveways</strong></li>
> <li><strong>Carpentry</strong></li>
> <li><strong>Patios</strong></li>
> <li><strong>Stonework</strong></li>
> </ul>
> </div>
> <div class="span6 offset1">
> <ul>
> <li><strong>Plastering</strong></li>
> <li><strong>Kitchen & Bathroom Refits</strong></li>
> <li><strong>Tiling</strong></li>
> <li><strong>Fencing</strong></li>
> <li><strong>Fascias</strong></li>
> <li><strong>Garages & Carports</strong></li>
> <li><strong>Guttering</strong></li>
> </ul>
> </div>
> </div>
> </body>
>
>
--
You received this message because you are subscribed to the Google Groups
"twitter-bootstrap" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
