I'm using the css styles from Twitter Bootstrap but I can't seem to align my "span16" div with my breadcrumb container. The breadcrumb container is the size I need. I've attached a screenshot to show the issue.
Here is my HTML:
<div class="container">
<ul class="breadcrumb" style="margin-top: 10px;">
<li>Search»</li>
<li class="active">Basic</li>
</ul>
<div class="row">
<div class="span16 well">
<form id="form_id" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
<div class="row">
<div class="span-one-third">
Span 1/3
</div>
<div class="span-one-third">
Span 2/3
</div>
<div class="span-one-third">
Span 3/3
</div>
</div>
</form>
</div>
</div>
</div>
You can view the full page here
Any idea what the issue is?
The span16 is wider than the container. The breadcrumb is restricted by the width of the container. Increasing the size of the container will allow the breadcrumb to match up.
The .span16 {} has a static width of 940 but it also has 19px padding applied so it's 940 + 2x19
Related
I'm having an issue with my bootstrap website. I have my site setup like so:
<div class="container">
<div class="row">
<div class="col-md-9" style="text-align:left;padding-top: 2%">
Some content
</div>
<div class="col-md-3" style="position:fixed">
Scrolling Sidebar
</div>
</div>
</div>
I have been trying to wrap my head around why the side bar is floated all the way to the left and is a col-3 but with a larger container so it's much larger on my screen. Has anyone seen something like this before?
The reason why there is overlapping conent is that when you make something position:fixed - it takes it out of the page flow and the remaining contents take its place. You need to explicitly set the width when it is fixed. In the following i am using a class "is-fixed" to set the fixe position styling.
<div class="container">
<div class="row">
<div class="col-md-9" style="text-align:left;padding-top: 2%">
Some content
</div>
<div class="col-md-3 is-fixed">
Scrolling Sidebar
</div>
</div>
</div>
//css style for element that is fixed
.is-fixed {
position:fixed;
top:0;
right:0;
width:200px; // or whatever
}
I'm sure of the fact that I'm doing something so wrong, I tried to solve that this morning.
Here's the deal, I'm trying to build a responsive HTML page, that will have the behaviour of the picture you see below :
So I told myself, for the elements that have to be move like the elements below "Besoin d'un devis", etc, I will use a the boostrap grid, and use for that an WYSIWIG generator. But instead, when I try to resize the window here's what happens :
Without resizing the window - Normal behaviour :
When I resize the window and I try to test the boostrap grid :
I uploaded a test version in the internet so you can see my problem.
http://test-stackoverflow.co.nf
If you need the code, I will provide it. I just don't know a way to provide a whole "test website" and a case like this in stack.
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="content_block orange size_2">
<div class="icon fa fa-car"></div>
<div class="text">Auto</div>
</div>
</div>
<div class="col-sm-3">
<div class="content_block rose size_2">
<div class="icon fa fa-home"></div>
<div class="text">Habitation</div>
</div>
</div>
<div class="col-sm-2 col-md-3">
<div class="content_block green size_2">
<div class="icon fa fa-heart"></div>
<div class="text">Santé</div>
</div>
</div>
<div class="col-sm-2 col-lg-3"></div>
</div>
</div>
Try this out
I believe you are overwriting Bootstrap's grid system here:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="content_block orange size_2">
<div class="icon fa fa-car"></div>
<div class="text">Auto</div>
</div>
</div>
<div class="col-sm-3">
<div class="content_block rose size_2">
<div class="icon fa fa-home"></div>
<div class="text">Habitation</div>
</div>
</div>
<div class="col-sm-2 col-md-3">
<div class="content_block green size_2">
<div class="icon fa fa-heart"></div>
<div class="text">Santé</div>
</div>
</div>
<div class="col-sm-2 col-lg-3"></div>
</div>
</div>
So, the columns are set, but then your size-2 style here:
.content_block.size_2 {
height: 200px;
width: 280px;
}
will overwrite that column's width.
Remove the width styling and it should work as intended. Please comment if additional help is needed.
Your problem is that you used class container instead of container-fluid in line 110. container has a fixed width, when you decrease your browser width, it stays the same and overflows its parent element. container-fluid has a width of 100%, so it fills your parent element.
Then you also have to adapt the images to 100% width (relative to the col-3) and a appropriate height.
EDIT:
.container has not a fixed width, but your .container-main# starts shrinking immediately because of its relative width, while .container shrinks not until your browser window hits 1200px width or less.
Your .container class is set to 970px. Set it to 100%. Also change the .col-sm-3 to .col-sm-4. Why? Well you 3 items, grid systems exist out of 12, 12/3 = 4.
Also set the width of the image to 100% to prevent overlapping.
For mobile I'd like the div NAV to be moved to the very top.
Desktop:
CONTENT | TEASER
................. | NAV
Mobile:
NAV
CONTENT
TEASER
I've already reversed the layout, i.e. I set it up the way it is supposed to be for mobile (below 992px) and use the push/pull classes to push the NAV div to the bottom right for desktop viewports. Unfortunately so far it doesn't quite work yet.
Any help would be greatly appreciated.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8"> NAVI </div>
<div class="col-md-8 col-md-pull-4 left" style="padding-bottom: 200px"> CONTENT </div>
<div class="col-md-4 col-md-push-8"> TEASER </div>
</div>
http://jsfiddle.net/aws9pv88/1/
I found the solution. Basically the HTML Markup is already correct.
All we need to do is position the Nav Layer absolute, give it a left and a margin-left, as well as defin a width, and give the Teaser div a margin-bottom.
See here: http://jsfiddle.net/aws9pv88/9/
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8 nav"> NAVI </div>
<div class="col-md-8 col-md-pull-4" style="padding-bottom: 200px"> CONTENT </div>
<div class="col-md-4 col-md-push-8 teaser"> TEASER </div>
<div style="clear:left"></div>
</div>
This is a solution made up of bootsrap + absolute positioning.
If however somone find a bootstrap only solution, feel free to post it here.
How to turn a bootstrap 3 col-lg-x into a "fixed height size" column with vertical scrolling bar? I did many research and tried several CSS codes but no way.
Update: I have this code, but it's scrolling horizontally:
.scrollablepage > :last-child
{
height:552px;
overflow-y:scroll;
}
Html:
<div class="container">
<div class="row">
<div class="col-lg-8 scrollablepage">
<div class="well well-sm">
<p>
hellohellohel lohellohellohellohell ohellohellohellohellohelloh ellohellohellohe
llohellohel lohelellohellohellohell ohellohellohel lohellohellohellohell
ohellohellohellohelloh ellohellohellohellohellohellohellohellohel
</p>
</div>
</div>
</div>
Why it's scrolling horizontally and not vertically?
I have my page structured into 3 different modules: navigation on the left, images in the center, and social sidebar right. Below is the css that formats this content. I'm having trouble when I resize the window; the images in the center overlap with the navigation on the left and the sidebar gets pushed to the bottom of the page and overlaps with the end of the left navigation. The navigation module/sidebar is fixed.
I'm using twitter bootstrap as a base.
Any ideas on what's causing this and how to fix this?
css
div.sidebar{
width: 120px;
position:fixed;
top:12%;
left:2%;
overflow-y:auto;
height:100%;
}
html
<div class ="container-fluid">
<div class = "row-fluid">
<!-- left navigation div -->
<div class = "span1" style = "width:120px;">
<div class = "sidebar" >
#navigation
</div>
</div>
<!-- middle images div -->
<div class = "span8" style = "width: 900px;">
#lot of images
</div>
<!-- social sidebar -->
<div class = "span2" style = "margin-left: 10px; ">
#social module with images
</div>
</div>
</div>
when I make the window smaller
normal
Have you thought about responsive web design?
You say your using twitter bootstrap? Have a look at this:
http://twitter.github.com/bootstrap/scaffolding.html#responsive
Add this to the head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Change the HTML:
<div class="container-fluid">
<div class="row-fluid">
<!-- left navigation div -->
<div class="span4">
<div class = "sidebar" >
#navigation
</div>
</div>
<!-- middle images div -->
<div class="span6">
#lot of images
</div>
<!-- social sidebar -->
<div class="span4">
#social module with images
</div>
</div>
NOT TESTED. Im also not 100% how big the fluid container is, i think its 12, if its 16 you will have to change the spans so they add up to 16
Couple issues I see...
You are completely defeating the purpose of ".row-fluid" and the framework by adding widths?? Remove all width assignments to the grid elements (ie. .container, .row, .span(x)) and let the framework do what it was designed to do...create the width for you. If you need to adjust width from what is being generated, add it to block level element INSIDE of the .span(x).
Your span HAVE to add up to NO MORE than 12. You have 14 which will absolutely make the last wrap around.
Overriding the spans with inline widths will cause odd behavior. Can you use the default TBS scaffolding instead?
Suggestions :
1.Remove all the extra things you put for style let bootstrap do the things !!
2.always test your div with "well"
Put your codes like this
<div class="container">
<div class="row" style="margin-top:20px;">
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
</div>
col-lg-* for large device
col-xs-* for extra small device
col-sm-* for small device
use it like this you can achieve what you want
Plunker demo
resize your browser to view the effect