csslayouthtmltwitter-bootstrap

Bootstrap: `well` inside a `span`/`row` goes beyond its container: how to make it fill "only" width=100% of it?

I have a problem with a Bootstrap well going beyond its containing element (here a class="row" , itself in a class="span4").

It is clearly visible in the JSFidle I did here: http://jsfiddle.net/sebastien_worms/fc42w/2/
And fullscreen : http://jsfiddle.net/sebastien_worms/fc42w/2/embedded/result/

Extract of the code is here: 

<div class="span4 pull-right">
    <div class="row">
        <div class="well" style="width:100%;">
            <b>This is the well that bothers me !</b><br> It goes beyond the right end of the screen ... And if you click "inspect element", you can see it goes beyond the right-end of its containing "span4" and "row"...
        </div>
    </div>
</div>

You can see the well going beyond its containing element (and the screen) when playing with you browser's window size (around 1000px wide is the most visible).

... And obviously, I can't set the well in the same div as the span: http://jsfiddle.net/sebastien_worms/fc42w/3/

How should I do to have the well fill 100% (only) of the span4 ?

Solution

  • It's because of your padding. You can add the following:

    .well {
    box-sizing: border-box;
}

    It will work in any modern browser, including IE8 and newer.