width 100% bootstrap responsive

Question

width 100% bootstrap responsive

Asked 11 years ago

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>

1

Code? It will help..

– CesarMiguel

2014/10/08 at 14:19
Unrelated to the question: I noticed all your tags script are out of the body. They should be inside, no?

– mgibsonbr

2014/10/08 at 17:01

1 answer

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

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

by mgibsonbr • **80,631** points · Answer 1 · 2014-10-08T16:55:51+00:00

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):

Open your example in Chrome (other browsers should have similar features);
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).
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)
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.