width 100% bootstrap responsive

Asked

Viewed 1,641 times

3

I’m using the bootstrap for its fluid grid, I used the row-fluid outside the container-fluid for it to be without the usual margin. In the desktop resolution the footer is normal with width 100%, but when the resolution decreases 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>
    <div class="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>
html twitter-bootstrap css3 responsive-layout grid
  • 1

    Code? It will help..

  • Unrelated to the question: I noticed all your tags script are out of the body. They should be inside, no?

1 answer

5


I noticed in the resolution xs the 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.

Updating: In that same resolution xs, the elements of the type navbar receive a negative margin of 20px to "compensate" the padding of 20px in the body. So it is necessary to assign them also to zero if the above change is made:

.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 (that’s what I did to get that answer):

  1. Open your example in Chrome (other browsers should have similar features);
  2. Right-click the "badly formatted" element and choose "Inspect Element";
    • If necessary, choose your parent element (sometimes the Inspect Element falls on a descendant of the problematic element).

  3. On the right, under "Styles" look 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)

  4. One of these rules will surely be the "problematic" - because they are the ones that apply to a particular screen resolution, and not to the others.

  • But then if I have a navbar she’s "outside" the window.

  • @Clarabatt In this case just adjust the navbar CSS too. Do you have an example of navbar where this problem happens, for me to test? By the way, you are using Bootstrap 2.x or 3.x?

  • I’m using bootstrap 2, check it out: http://jsfiddle.net/xd23vmxp/1/

  • @Clarabatt I updated the answer. As I imagined, the navbar applied a different style to the body to "compensate". The solution is to simply undo it too.

Browser other questions tagged html twitter-bootstrap css3 responsive-layout grid

You are not signed in. Login or sign up in order to post.