Multiple Spans In One Row with Twitter Bootstrap - css

Using Twitter's Bootstrap's standard 940px fluid grid responsive grid I'm trying to get multiple .span div's in one .row.
I want to show a max of 3 .span's on each internal line that grows with the page. So as more .span's are added they just get added to the .row.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="span4">1</span>
<div class="span4">2</span>
<div class="span4">3</span>
<div class="span4">4</span> <!-- wrap to a new line-->
<div class="span4">5</span>
</div>
</div>
</div>
The problem I'm facing is that the span4 which wraps to a new line has the inherited left margin. While I can fix this with nth-child() in modern browsers, it obviously still affects IE.
Any ideas how I can achieve this?

I decided to use the nth-child selector to remove the margin on certain .span's. So my final solution looked likes this:
One column of spans for 320px to 979px
Two columns of spans for 980px to 1409px
Three columns of spans for 1409px and up
#media (min-width: 320px) and (max-width:979px) {
/* one column */
.row-fluid .span4 {width:100%}
.row-fluid .span4 {margin-left:0;}
}
#media (min-width: 980px) and (max-width:1409px) {
/* two columns, remove margin off every third span */
.row-fluid .span4 {width:48.717948718%;}
.row-fluid .span4:nth-child(2n+3) {margin-left:0;}
}
#media (min-width: 1410px) {
/* three columns, .span4's natural width. remove margin off every 4th span */
.main .span4:nth-child(3n+4) {margin-left:0;}
}
For IE7 and 8 I set the width of each span to be 48.717948718% (so two per row) in the css - specifically targeting these versions by using html5 bolierplate .oldie html class. I then used Modernizr and a custom test for nthchild found at https://gist.github.com/1333330 and removed the margin for each even span, if the browser does not support the nth-child selector.
if (!Modernizr.nthchildn) {
$('.span4:even').addClass('margless');
}

Your question specifies that you want columns to automatically wrap to the next line, but in Bootstrap's grid system .spans are specifically engineered to work within a .row, that's the grid. You're not using any .rows at all in your code. So my suggestion, if you stay true to the grid, is to have your code look something like this:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="row">
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div> <!-- wrap to a new line-->
<div class="span4">5</div>
</div>
</div>
</div>
</div>
Here is a jsfiddle that shows the OP's example and another for clarity. http://jsfiddle.net/qJ55V/5/
You have to use .row (not .row-fluid) in order to get the inherited styles applied to each column (span). Yes, it's extra markup, but not using .row will unfortunately cause your columns to jumble up.

Probably not the most elegant solution, but I just define a new css class in my custom stylesheet such as:
.margless{
margin:0 !important;
}
Then I apply it to any element that I don't want to have margins. I ran into the same thing using bootstrap and couldn't find an alternative solution.

Related

How to prevent overlapping of two divs?

I have a page, when i am looking this page on a laptop screen the two divs are rendering properly but when i am looking this page on mobile screen these two divs are overlapping above each other. I want to remove this overlapping of these divs and want to read first div then second div.
How to do that ?
#media only screen and (max-width:768px){
.vc_row-fluid.lighter-overlay,
.vc_row-fluid.darker-overlay{
display:inline-block; /* Change this to inline-block instead of block */
}
}
but this is creating issue for header,solve that accordingly
check out with Bootstrap. it provides with responsive CSS. you have to include the div class that you require.
example: if you have two divs, put them into one main div and then call each div with separate div class. like
<div class="col-sm-12">
<div class="col-sm-6">
// your code for first div
</div>
<div class="col-sm-6">
//your code for second div
</div>
</div>
try like this. it may help you.
I hope i understand your question because its not really clear(No code provided)
But what i think you need to do is the following:
<!-- Probably your html part -->
<div class = "wrapper">
<div class = "container">
<!-- Some content-->
</div>
<div class = "container">
<!-- Some content-->
</div>
</div>
Here comes the css magic.....
.wrapper{
display:block;
}
.container{
display: inline-block;
}
#media only screen and (max-width:768px){
.container{
width:100%;
}
}
#media only screen and (min-width:768px){
.container{
width:50%;
}
}
By using media querys you can easily fix this kind of stuff
You added as a comment to your question that a demo URL was http://voyagecontrol.com/canarywharf
Origin of the problem: #venue_draft has inline styles including height: 900px.
Solution: it should be removed (elements should adapt automatically to more or less content. Not fixing height is a good start for that) or, if other problems occur, replaced by min-height: 900px

Is it possible to make elements in foundation not wrap around automatically when window width is too small?

I am building a website for which I am using zurb-foundation for the UI building blocks. However, in some places I want to make the elements in the web non-responsive.
For example, if I have the following code
<div class="row">
<div class="large-9 columns">
<div class="my-element">Some elements1</div>
<div class="my-element">Some elements2</div>
<div class="my-element">Some elements3</div>
</div>
</div>
And for my-element, I have
.my-element {
float: left;
}
Now if I shrink the browser width to a certain width so small that it can't hold all three, the three elements will wrap around into 2-3 lines. I am wondering if there's a way to make it not do that? i.e. have the website in a way such that the user should scroll left and right when the browser width is too small. (Stackoverflow itself is a good example of what I want to achieve :D)
I believe the answer is simpeler, add this to your stylesheet:
.row {
min-width: 500px;
}
div.row will now have a minimum width of 500px. When the browser is resized to a size smaller than 500px the scrollbars will appear, and your layout will stay in tact.
JSFiddle demo
What you can do is write higher specificity rules which will over ride less specific rules so for example, you can assign a custom class to the container elements like
<div class="row custom_wrapper">
<div class="large-9 columns custom_inner_wrapper">
<div class="my-element">Some elements1</div>
<div class="my-element">Some elements2</div>
<div class="my-element">Some elements3</div>
</div>
</div>
Now you can target these elements like this...
.custom_wrapper {
/* Target .custom_wrapper */
}
.custom_inner_wrapper {
/* Target .custom_inner_wrapper */
}
Now use this to target the child elements like
.custom_wrapper .custom_inner_wrapper div:nth-of-type(1) {
/* Targets 1st div inside .custom_inner_wrapper */
}
So this way, these rules will over ride the default rules which will be less specific.
Note: Ignore using over specific rules as it will affect the
performance, as well as you'll end up writing more rules to over ride
specific rules.

Twitter Bootstrap: non-responsive row in responsive layout

I'm using a responsive fluid grid system on my site, and in most cases the responsive Bootstrap behaviour is what I want: on small screens, the grid columns become fluid and stack vertically.
However, using grid nesting, inside a nested row this is not always the desired behaviour. There are some rows that are not supposed to be stacked vertically, regardless how small the screen is. This is exactly the behaviour of the whole grid when I completely disable all responsive CSS code, but obviously this is no alternative if the responsive behaviour is required for the outer rows.
The relevant markup is:
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">This column should be stacked on small devices.</div>
<div class="span6">
<div class="row-fluid">
<div class="span6">Nested row. This column should NOT be stacked on small devices.</div>
<div class="span6">Nested row. This column should NOT be stacked on small devices.</div>
</div>
</div>
</div>
</div>
See this jsfidde for clarification.
How would one best solve this problem? Is there a way to do it with the native bootstrap functions?
[class*="span"] .span6 { display: inline-block; width: 48.61878453038674%}
example:
http://jsfiddle.net/NfTQ7/1/
What I have done to solve issues like this is the following:
<div class="row-fluid">
<div id="remove-mobile" class="span6">Nested row. This column should NOT be stacked on small devices.</div>
<div id="remove-mobile" class="span6">Nested row. This column should NOT be stacked on small devices.</div>
</div>
#media only screen and (max-width: 480px) {
#remove-mobile {
display:none;
}
}
That way, you get rid of that whole mess on smaller devices, and you can add code specifically targeted towards mobile sizes by simply doing the opposite:
<div class="row-fluid">
<div id="show-mobile" class="span6">Your Beautiful Code For Mobile Only</div>
</div>
#media only screen and (min-width: 481px) {
#show-mobile {
display:none;
}
}
#media only screen and (max-width: 480px) {
#show-mobile {
display:block;
}
#remove-mobile {
display:none;
}
}
It's not the simplest of solutions but I've found it suits my needs
https://github.com/twitter/bootstrap/blob/master/less/mixins.less#L572
If you dive into the source for bootstraps grid, it's relatively easy to pull out the less code used to generate the span[1-12] system.
So I just pulled out the basics and put them in my own file with a different selector. So now, when I want to use span's that don't wrap I just use .naps[1-12] (Span spelt backwards).
The responsive CSS looks for .span[1-12] selectors so it ignores my .naps elements.
It's not elegant, and it's not particularly scalable. It does work though :-/

Centering "odd" spans with Twitter Bootstrap grid

I played with bootstrap a little, then I found this annoying problem about how to centering a span class. After trying offset to do centering some span, I can centering a certain span class like (span8 with offset2, or span6 with offset 3), but the problem is, I want to centering the span7/span9/span10.
Then I trying to use some tricks to centering the span10...
<div class="container"> <!--Or span12 since the width are same-->
<div class="row">
<div class="span1" style="background:black;">Dummy</div>
<div class="span10" style="background:blue;">The Real One</div>
<div class="span1" style="background:black;">Dummy</div>
</div>
</div>
Is there any solution rather than using the code above?
And what should I do if I want to centering the span7, span9 or even span11 without changing the row margin-left value? Because the class row already set the margin-left by 20px, that makes me hard to centering the span.
Centering "even" .spanN? Use .offsetN
<div class="span10 offset1">
Centering "odd" .spanN? Impossible using framework resources. As you decided to use Twitter Bootstrap, you assumed working with a grid. If you center an "odd" column width element, you're breaking the grid, so there are no Bootstrap tools to do that.
There's a theoric (but strange) solution: duplicate your column count. In a 24-column layout, a .span7 becomes a span14, wich you can center with an .offset5.
This is a non-issue in Bootstrap 3, but for Bootstrap 2.x, I've come up with a CSS workaround that creates a 'half' offset that can be used to center (almost) odd numbers of spans. These half spans create a percentage that is half the standard offsetX in the bootstrap.css
/* odd span centering helpers */
.row-fluid .offsetHalf {margin-left:8.5% !important;}
.row-fluid .offsetHalf1 {margin-left:12.9% !important;}
.row-fluid .offsetHalf2 {margin-left:21.6% !important;}
.row-fluid .offsetHalf3 {margin-left:25.6% !important;}
Link to demo

CSS - Bootstrap : below 767px viewports 2 spans (or more) per rows instead of 1

there is a default method with Bootstrap or how I can edit to do that below 767px (mobile) each spans within a row don't becomes 100%?
I just want they go to 50% ... to have for example 2 spans side by side instead of one below the other.
thanks in advance
I know this question is old but I came across it while looking for a solution to this same problem, then I figured it out myself. I thought I should post my solution in case anyone else finds this page.
My problem was that I had a responsive Bootstrap page with four columns (four span3 list items) and another page with three columns (three span4 list items). I wanted both of them to turn into two columns when under 767px. My structure is like this for the four-column page, with row-fluid repeated several times inside span12:
<div class="span12">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3"></li>
<li class="span3"></li>
<li class="span3"></li>
<li class="span3"></li>
</ul>
</div>
</div>
And my structure is like this for the three-column page, again with row-fluid repeated several times inside span12:
<div class="span12">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4"></li>
<li class="span4"></li>
<li class="span4"></li>
</ul>
</div>
</div>
That structure is taken from the Bootstrap section about thumbnails. Here is the CSS I added to make both of them turn into two columns below 767px:
#media screen and (max-width: 767px) {
/* remove clear from each ul to stop them from breaking into rows */
ul.thumbnails::after {
clear: none;
}
/* make the width of each span equal to 47% instead of 100%.
You could make it closer to 50% if you have no borders or padding etc. */
ul.thumbnails li[class*="span"]{
width: 47%;
float: left;
}
// select the second span in each row (ul) on the 3 column page
[class*="span"] .span4:nth-child(2),
// select the first span in the even rows on the 3 column page
[class*="span"] .row-fluid:nth-child(even) .span4:nth-child(1),
// select the even spans in each row on the 4 column page
[class*="span"] .span3:nth-child(even)
{
float: right; //float them all to the right
}
}
You will have to adjust these selectors if you're not using the same structure. They aren't the most elegant selectors either so if you're able to write them better, please do. As soon as I got them working I couldn't be bothered to play with them anymore. I hope this helps someone!
[edit] I just noticed that I actually use fluid-row in all my code, not row-fluid... so you may need to change it to that. fluid-row doesn't have any rules in my stylesheet though.
Link to fiddle with correct selectors in CSS: http://jsfiddle.net/rUCgS/4/
I simply modified the behavior of .row-fluid [class*="span"] inside #media (max-width: 767px) { ... } and changed it back when I hit max-width: 480px. I also added a class .span-control to the 2 first spans of a row to make sure they both have their margin-left removed.
Should look like this
The !important tags were useful for jsfiddle, but you won't need them in your stylesheet.
Try row-fluid instead of row with two span6.
HTML:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel='stylesheet' type='text/css' />
<div id='wrap' class='container'>
<div id='row1' class='row-fluid'>
<div id='box1' class='span6'>
box1
</div>
<div id='box2' class='span6'>
box2
</div>
</div>
</div>
CSS:
#wrap{
background-color:black;
height:50px;
}
#box1{
background-color:green;
}
#box2{
background-color:red;
}
check here jsFiddle

Resources