I try to use bootstrap affix (2.1.0) in one of my mvc4 project.
It seems that .span3 and .span9 doesn't work properly if, after scrolling 50px, the .span9 content move to the left.
I found this: Text moves to side of the page on scroll down but is not working. Adding floats to spans works somehow but is not "responsive". I think it must be a better solution.
Does anybody make it work ?
Here is my code (copy & paste from bootstrap site). Where I did wrong ?
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<div class="container">
....
<div class="row">
<div class="span3 bs-docs-sidebar" data-spy="affix" data-offset-top="50">
<ul class="nav nav-list bs-docs-sidenav">
<li><i class="icon-chevron-right"></i> Download</li>
....
<li><i class="icon-chevron-right"></i> What next?</li>
</ul>
</div>
<div class="span9">
....
<section id="download-bootstrap">
Problem solved. Once I affixed the unordered list, everything working fine. Somehow I understood that I have to affix the parent div, not the list itself. My mistake.
another way to fix this is to set the nav span min-height
.span3 {
min-height: 1px;
}
also I needed to set the nav to not affix when in tablet mode:
#media (max-width: 767px) {
.sidenav.affix {
position: static;
There really isn't enough in the docs at the moment explaining how to get this to work.
Related
I'm curious if anyone has a solution to this problem, that ISN'T mentioned in the other posts. I have tried all the UP voted solutions mentioned in other posts, but my problem persists.
Specifically - the "example" code and "Stock" bootstrap carousel seems to ADD margins to the images, thus making them smaller than the container, and NOT aligning with the other containers on the page.
Here is the recommended code that works - but has margins I cannot seem to 'easily' remove.
<div class="container" style="margin-top:40px" >
<div class="row" >
<div class="col-sm-12" >
<div id="carousel-msa" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
... carousel code...
I can force it using additional "style" arguments, BUT this makes the image NON-responsive - and I need it to be responsive.
<div id="carousel-msa" class="carousel slide" data-ride="carousel" style="margin-left:-15px; width:1200px">
If you view the JS Fiddle,you will see the images is horizontally compressed, and does not align with the other elements.
https://jsfiddle.net/Le16u319/1/
Posts I've looked at so far - but who's solutions do NOT solve my problem are:
Bootstrap Carousel image doesn't align properly
Twitter Bootstrap: Have carousel images full width and height
Bootstrap Carousel image doesn't align properly
Any help MUCH appreciated.
You don't need a new class. You need to simplify your code instead.
Remove <div class="col-sm-12" >. This block only adds extra padding.
Remove style="margin-top:40px". And remove the position: absolute; property from the .MSA-masthead class.
Remove class="img-responsive center-block" from all slides. Also remove .inner-item {...} and .carousel img {...} from your CSS. Use this code instead:
.carousel-inner img {
height: auto;
width: 100%;
}
Your footer adds long horizontal scroll when the screen width is less than 1200px. To fix it remove the width: 1200px; property from the .MSA-footer class. The width of the footer will be 100% due to the default values.
Please check the result: https://jsfiddle.net/glebkema/mrytx12L/
Please refer this,
In CSS, ADD
.slider{
padding-left:0px !important;
padding-right:0px !important;
}
This is all you'll need, you can disregard the other solutions code that you tried in the CSS.
Then, Make sure to add the reference to the Slider class in the code, here:
<div class="container slider" style="margin-top:40px" >
<div class="row" >
<div class="col-sm-12" >
<div id="carousel-msa" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
...
That should work.
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
What is required to make links in bootstrap grids work throughout all the media breakpoints ?
In my case, the links work only as long as the grid is not stacked.
This is what the grid looks like:
<div class="row">
<div class="col-md-6">
<a href="#" class="room" style="height: 155.60px; width: calc(25.0% - 4px);"> <span>Item 1</span>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-12">
<p>This is another row</p>
</div>
</div>
</div>
</div>
The working fiddle is here:
http://jsfiddle.net/pTw2j/8/
Edit Thanks for the fast answer. I chose overflow:hidden; at the end to avoid scrollbars while still fixing the issue.
The problem is that the links are floated, resulting in a height of 0 for the parent .storey container.
Setting overflow: auto on the container will fix the problem.
http://jsfiddle.net/pTw2j/13/
.storey {
overflow: auto;
}
This is referred to as "clearfixing." If you're interested in learning more, here are two good articles:
CSS Tricks: Force Element to Self-Clear its Children
David Walsh: CSS Clear Fix
I had the same problem. In my case a better solution was to add the class of "clearfix" to the containing div. Bootstrap has this class built in so you don't have to do anything with your CSS.
Adding overflow:auto will result in a horizontal scroll bar. Best to use clearfix class which resolves the issue.
Is there a way to make a twitter bootstrap navbar only as wide the menu items that are shown on it? My navbar has only 4 items by default, and 5 when the user is logged in, but the navbar is way too wide. I've tried changing the span, but that messes up the alignment and the navbar is no longer properly centralized. Could anyone help? Thanks!
Alternatively, I would also appreciate it if I somebody could help me just make the navbar fixed width, but without misaligning it and keeping it centralized.
This is my code for navbar:
<div id="top" class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Home</li>
<li>Used books exchange</li>
<li>Submit a listing</li>
<li>My account</li>
<?php if (!empty($_SESSION["id"]))
{
print('<li>Log out</li>');
} ?>
</ul>
</div>
</div>
If I understand you correctly, i think this is what you are looking for.:
.container {
text-align: center;
}
.navbar {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
It makes the navbar only as wide as its content, centered, and does reasonably well when you resize it.
Here is a Jsfiddle of it:
http://jsfiddle.net/hajpoj/9E7QX/
You could give it a margin-right;
.navbar {
margin-right:200px; //whatever px you need
}
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