width 100% responsive bootstrap

Navigation
3

I'm using the bootstrap for your fluid grid, I've used row-fluid out of container-fluid to run out of bounds. In the desktop resolution the footer is normal with the width 100%, but when it decreases the resolution it gains the margin. 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>titulo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/blueberry.css">
    <link href="img/favicon.png" rel="shortcut icon">
    <link href="style.css" rel="stylesheet">
    <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body><divclass="row-fluid">
        <div id="blueberry" class="blueberry span12 centralizado">   
            <ul class="slides">
                <li><img src="img/img1.jpg" /></li>
                <li><img src="img/img3.jpg" /></li>
                <li><img src="img/img2.jpg" /></li>
            </ul>
        </div>
     </div>

    <div class="row-fluid">
    <div class="span12 andro-saude">
        <h2><a href="">Area 1</a></h2>
        <hr/>
        <ul class="span10 centralizado">
            <li class="well span3 info">
                <img src="img/logo-cabeca.png">
                <a><h3>Título</h3></a>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora veniam beatae, aspernatur aut architecto, obcaecati, delectus in optio id repellendus molestiae, amet soluta natus fugiat nisi nihil at debitis mollitia.</p>
                <h5>13 de janeiro de 1223</h5>
            </li>
            <li class="well span3 info"></li>
            <li class="well span3 info"></li>
            <li class="well span3 info"></li>
        </ul>
    </div>
</div>

<div class="row-fluid">
    <div class="span12 rodape">
        <div class="span4 desenvolv">
           <p>Desenvolvimento</p>
           <a href="#" target="blank"><img src="img/cpc.png"></a>
        </div>
        <div class="span4">
            <h4>Nome</h4>
            <p>Endereço</p>
            <p>Contato</p>
        </div>
        <div class="span4">
            <ul class="sociais">
                <li><a href=""><img src="img/social (1).png"></a></li>
                <li><a href=""><img src="img/social (2).png"></a></li>
                <li><a href=""><img src="img/social (3).png"></a></li>
                <li><a href=""><img src="img/social (4).png"></a></li>
                <li><a href=""><img src="img/social (5).png"></a></li>
                <li><a href=""><img src="img/social (6).png"></a></li>
            </ul>
        </div>
    </div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.blueberry.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('.blueberry').blueberry({interval: 4000, duration: 4000});
});
</script>
</html>
    
asked by anonymous 08.10.2014 / 16:18

1 answer

5

I noticed that at resolution xs body gets a padding-left and padding-right of 20px . This is causing the "margin" to appear. Try setting them to zero manually: 

body {
    padding-left: 0;
    padding-right: 0;
}

Example in jsFiddle .

Update: At this same resolution xs , elements of type navbar receive a negative margin of 20px to "compensate" the padding of 20px in body . So you need to assign them to zero as well if the above change is done: 

.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
    margin-left: 0;
    margin-right: 0;
}

Example in jsFiddle . If you encounter the same problem with other components, I suggest the following sequence of steps to debug (this is what I did to get to this answer):

  • Open your Chrome sample (other browsers should have similar features);
  • Right-click the "malformatted" element and choose "Inspect Element";
    • If necessary, choose your parent element (sometimes the Inspect Element falls into a descendant of the problematic element).

  • On the right, in "Styles" search for the rule corresponding to the desired Bootstrap resolution:

    • xs - @media (max-width: 767px)
    • sm - @media(min-width:768px) and (max-width:991px)
    • md - @media(min-width:992px) and (max-width:1199px)
    • lg - @media(min-width:1200px)

    (Note: these values refer to the current version of Bootstrap - 3.X - version 2.X may use slightly different values)

  • One of these rules is sure to be the "problem" - because they apply to a particular screen resolution, not the other ones.

    • 08.10.2014 / 18:55
    Use of uppercase or lowercase letters in UUID Apple compelling to develop app for iPhone and obligatorily for iPad, is that right?