Menu
I am relatively new to bootstrap and trying to design my page with bootstrap affix. Here in code When I removes my col-lg-6 class from that is located inside affix targeted div it works perfectly fine but it doesn't work with given bootstrap class is applied there. I tried after removing that particular class at that time it works exactly fine.
<body id="top" data-spy="scroll" data-target="#header">
<header id="header" style="background-position: 0% 0px;">
<a class="image avatar" style="cursor: pointer;">
<img src="resources/images/Nimesh.jpg" alt=""></a>
<h1><strong>Ata at Turpis</strong>, cep curae tempus<br> adipiscing erat ultrices laoreet<br> aliquet ac Adipiscing.</h1>
<ul class="nav nav-tabs nav-stacked" data-spy="affix">
<li class="active"><a href="#section-1">Section One</a></li>
<li><a href="#section-2">Section Two</a></li>
<li><a href="#section-3">Section Three</a></li>
<li><a href="#section-4">Section Four</a></li>
<li><a href="#section-5">Section Five</a></li>
</ul>
</header>
<div id="profileImage">
</div>
<div id="main">
<div id="section-1" class="background">
<div class="col-lg-6">
<!--content 1a -->
</div>
<div class="col-lg-6">
<!--content 1a -->
</div>
</div>
<div id="section-2" class="background">
<div class="col-lg-6">
<!--content 2a -->
</div>
<div class="col-lg-6">
<!--content 2b -->
</div>
</div>
<div id="section-3" class="background">
<div class="col-lg-6">
<!--content 3a -->
</div>
<div class="col-lg-6">
<!--content 3b -->
</div>
</div>
<div id="section-4" class="background">
<div class="col-lg-6">
<!--content 4a -->
</div>
<div class="col-lg-6">
<!--content 4b -->
</div>
</div>
<div id="section-5" class="background">
<div class="col-lg-6">
<!--content 5a -->
</div>
<div class="col-lg-6">
<!--content 5b -->
</div>
</div>
</div>
</body>
765
This issues could be broken down into 2 parts:
To make the grid system working correctly, 3 classes are required: .container, .row, .col-xs-*.
.container: Should be add to the wrapper of your document..row: when you want to setup the columns, you have to wrap those columns with a .row wrapper..col-xs-*: This is where you can set the width of your content.So your document should be something like this:
<div class="container">
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6"></div>
<div class="col-xs-3"></div>
</div>
</div>
The document for the grid system is here.
In your case, it seems like you didn't provide .row nor .container for your columns, so the actual layouts would be broken and unexpected to some degree. I think this is probably the reason why if you remove those col-lg-* classes it works as you want.
The official document for Affix is pretty vague actually. Basically, when you scroll down your document, the <div data-spy="affix"> element will shift from the following states:
.affix-top to your spy element when the page is loadeddata-offset-top, it will remove the .affix-top class and add a .affix class to the same element.data-offset-bottom, it will remove the .affix class and add a .affix-bottom class to the same element. As the document mentioned, you HAVE TO set the css rules for these classes to make the affix plugin works.
There are 3 important rules you have to set:
1. The width of .affix-top, .affix, .affix-bottom
2. The position you want for your affix element when it is fixed
3. Recover the .affix-bottom position from fixed to absolute
So your css would be something like this:
.affix {
top: 0;
width: 100%;
}
.affix-top {
width: 100%;
}
.affix-bottom {
position: absolute;
width: 100%;
}
Here's a rough Codepen example for using affix. I've copied your codes and it works whether you add col-lg-6 in your section or not. You may resize the window to see your 2 columns layout.
One thing need mention is that I am not quite sure why you put your affix element in your header since it is used for showing the section title list on sidebar in most design cases. With that in sense, I move it out from the header to the main area with a column setting in grid.
Hope this would help.
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
