Question

I’m using Twitter Bootstrap to create a layout on PhoneGap.

The with is 768px;

I have this simple HTML:

<div class="container">
<div class="span12" style="background: red;">
<img src="img/teste.png">
</div>
</div>

I’ve place the red background just to check if the width is ok and it is.
Here is the image, with 768px;

And here is the damn left margin when I add a image:

I have checked both bootstrap.css and bootstrap-responsive.css for margin commands and nothing.

The image width is 768px (checked). I need to make the image fit the 768px.

Answer 1

That margin you see is part of the bootstrap grid system. It is there to fit the content properly wit the widths given in the bootstrap and its offsetted by the .row div, which you’re not including in your markup.

So just encase your .span12 div inside a .row div and it should be removed.

<div class="container">
    <div class="row">
        <div class="span12" style="background: red;">
            <img src="img/teste.png">
        </div>
    </div>
</div>