I'm experimenting with Bootstrap and using jsfiddle.net to create some quick and dirty tests.
I'm running into a brick wall on a really simple test however. I just want to see the grid system in Bootstrap, so I've duplicated their first example:
<div class="row">
<div class="span4">Span 4</div>
<div class="span8">Span 8</div>
</div>
However, it doesn't seem to work-- the "Span 4" and "Span 8" appear stacked rather than in the expected two-column layout.
Am I missing something obvious? Here's the fiddle: http://jsfiddle.net/8Xf2j/1/
Thanks
If you use the bootstrap-combined.min.css file, it means that the Responsive Layout is active.
Moreover, you have to use a .container to set the minimum width (if not, the body will fit the window, which will result in stacking anyway - on small screens).
Here is one way to use the grid : Demo (jsfiddle)
<div class="container">
<div class="row">
<div class="span4">Span 4</div>
<div class="span8">Span 8</div>
</div>
</div>
You should notice that only the bootstrap.min.css file is included in the resources.
Notice that the width of span is already defined. Its total width is 960px(span4(320px) + span8(640px) = span12(960px)). So jsfiddle is showing the result like this. Create an html file and try it, setting the border for your reference.
Related
I understand the problem, as described and answered here.
I have quite a complicated layout with a sidebar navigation, a top navigation, a fluid-container and then page-title and page-body structure for each page. So just adding another container did not solve the problem as suggested in that answer.
Once I get into the page-body, all the rows are stretching 'outside' the parent page-body.
Notice I have added padding to the default container-fluid to 'pull' all the content in from each side of the page. Removing them does not fix it.
I've tried every change I can think of except removing the padding from the default row, because I'm pretty sure that is a no-no.
Anyone have any idea how to get those pesky form controls to stay 'inside' the page body?
There is two solution either give an additional class to row and manipulate its layout or don't use row use <div class="col-md-*" /> without parent .row class div as many times u want and use <div class="clearfix"> if you want to break forcefully to next row
EDIT:-
For example
<div class="row">
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
</div>
<div class="row">
<div class="col-md-4">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
</div>
The same can be achieved without .row class
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
<div class="clearfix">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
<div class="col-md-4">div1</div>
I need to eliminate the large gaps between the boxes in the left column, but I can't figure out how to do it. (see image)
I have an html template that is generating the div contents with a for-loop (row of 2 col-xs-6 columns), so I can't set static height values and float things (because the number of lines is always changing).
The code looks similar to this:
<div class="row">
<div class="col-xs-6" py:for="title, content in data">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
{ title }
</div>
</div>
<div class="col-xs-12" py:for="line in content">
{ line }
</div>
</div>
</div>
Does anyone know some css wizardry to help me out?
At this point in time bootstrap doesn't support offset grids in a pinterest-like style.
Although, you can use bootstrap in combination with something like Masonry Grid to get the effect you are looking for:
http://masonry.desandro.com/
Id use match height as it suits your question more. Here is what you do.
Download this and add to your scripts. Then add a class calldd match-height to your div columns which you want to be the same height.
https://github.com/liabru/jquery-match-height/blob/master/dist/jquery.matchHeight-min.js
$(function() {
$('.match-height').matchHeight();
});
If any issues replace $ with jQuery
one issue I don't quite understand.
I made an online sample, when I'm resizing the window, the SPANs response one by one.
Online sample http://jsfiddle.net/Pva7y/1/
Online Images
However, I copied the same code to my local html, the SPANs response just together.
Local Image.
why different? Thanks
HTML:
<div class="row ">
<div class="span7 blue">
1
</div>
<div class="span2 red">
2
</div>
<div class="span3 green">
3
</div>
</div>
CSS:
.blue{background-color:blue;}
.red{background-color:red;}
.green{background-color:green;}
First thing is that you forgot to use container div. Correct pattern is
<div class="container">
<div class="row">
<div class="span12">
1 2 3
</div>
</div>
</div>
See corrected jsfiddle (1).
Next, if you want your page to be responsive and fit the layout to the size of the viewport you have to also include bootstrap-responsive.css. See jsfiddle (2). In your local HTML you used either both bootstrap.css and bootstrap-responsive.css or prior files merged to one CSS for reducing client-server requests number.
Your <div>s are floated in your Fiddle, but they are not floated in your local html judging from your screenshot. And since bootstrap.css floats the <div> element with a class of span, I am guessing that bootstrap.css is not loaded properly in your local html file.
A way to troubleshoot your issue is to check the Inspector (if you're using Chrome), or Firebug (if you're using Firefox). Look at the computer style of the three <div>s in your fiddle AND your local html, and compare them. They must have been styled differently because they look different on the same browser, so that's the way to start troubleshooting.
I have a demo site which is located here to give you an idea of what's going on. If you scroll to the bottom where you see the 9 individual posts they are all laid out properly. How ever if you shrink the screen to anything less then 1232px's youll see that the 7th post breaks away from the others and shifts down.
Now I am using default styles to align them as such, using row and then span4. Can any one explain why this happens? And any way to fix it?
Your span totals should add up to 12. Your example site however adds up to more than 40! I don't think there is any defined behaviour for what should happen if you don't use it as intended.
From Bootstrap homepage
"The default Bootstrap grid system utilizes 12 columns"
So the total of your spans must add to 12 per row. ie.
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
<div class="row">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
<div class="row">
<div class="span7">...</div>
<div class="span3 offset2">...</div>
</div>
I am currently testing out Blueprint to create the layout for a site. So far it has been going great, but now I've run into a problem I'm wondering if there is any elegant solution to.
I am using the default 24 column layout and have a situation where I would like to do something similar to:
<div class="span-8 box">..</div>
<div class="span-8 box">..</div>
<div class="span-8 box last">..</div>
Problem is that the box-class adds a padding which causes the three div's to not fit into the 24 columns.
One "solution" is to use span-7 instead for all three, but this doesn't fill the entire width.
Any ideas?
You can use the class this way:
<div class="span-8">
<div class="box">..</div>
</div>
<div class="span-8">
<div class="box">..</div>
</div>
<div class="span-8 last">
<div class="box">..</div>
</div>
You could change the "span-7" css rule:
...
.span-7 {width:274px;}
...
And change the divs to "span 7".
Simplest thing I could think of :)
jsFiddle example.