I have been playing with a preview of Bootstrap 3, and have had troubles with the "affix pluggin", which allows for fixed-position floating bars.

Please find a fiddle here showing my troubles. Basically, the right-hand side button does float, but the width and offset styling inherited from the grid system seems to disappear when position: fixed is applied.

This is my code:

<div class='container'>
    <div class='row'>
        <div class='col-span-8'>
            <legend>Lorem</legend>
            <div>[Large amounts of text]</div>
        </div>
        <div class='col-span-4 well' data-spy='affix' data-offset-top='50'>
            <div class='btn btn-large btn-danger col-span-12'>This is fixed</div>
        </div>
    </div>
</div>

What am I doing wrong? (I know Bootstrap 3 is still under active development, but I hope someone with have some insight here.)

I have been playing with a preview of Bootstrap 3, and have had troubles with the "affix pluggin", which allows for fixed-position floating bars.

Please find a fiddle here showing my troubles. Basically, the right-hand side button does float, but the width and offset styling inherited from the grid system seems to disappear when position: fixed is applied.

This is my code:

<div class='container'>
    <div class='row'>
        <div class='col-span-8'>
            <legend>Lorem</legend>
            <div>[Large amounts of text]</div>
        </div>
        <div class='col-span-4 well' data-spy='affix' data-offset-top='50'>
            <div class='btn btn-large btn-danger col-span-12'>This is fixed</div>
        </div>
    </div>
</div>

What am I doing wrong? (I know Bootstrap 3 is still under active development, but I hope someone with have some insight here.)

• javascript
• css
• twitter-bootstrap
• twitter-bootstrap-3

Share Improve this question Follow edited Aug 13, 2013 at 8:38 edsioufi 8,34533 gold badges3838 silver badges4242 bronze badges asked Apr 28, 2013 at 12:45 RandomblueRandomblue 117k150150 gold badges363363 silver badges558558 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

data-offset-top='50' adds the class affix-top. This class has no definition in bootstrap.css. After scrolling the page the class affix replace the class affix-top. affix defines the position fixed. This caused different displays of your affixed div.

Maybe Changing your code to shown below works more as expected. NB in this case The affixed div isn't shown on small screens?!

<div class='container'>
    <div class='row'>
        <div class='col-span-8'>
            <legend>Lorem</legend>
            <div>[Large amounts of text]</div>
        </div>
        <div class='col-span-4'>
            <div class="well col-span-4" data-spy='affix'>
            <div class='btn btn-large btn-danger col-span-12'>This is fixed</div>
            </div>
        </div>
    </div>
</div>