边框在屏幕尺寸767px和以下引导程序

我有一个问题与自举站点设置，出于某种原因，当窗口小于767px有一个20px填充在右侧，我不知道如何摆脱的。边框在屏幕尺寸767px和以下引导程序

HTML：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Sticky footer &middot; Twitter Bootstrap</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <!-- CSS --> 
    <link href="css/bootstrap.css" rel="stylesheet">  
    <link href="css/bootstrap-responsive.css" rel="stylesheet"> 
    <link href="css/main.css" rel="stylesheet"> 

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
     <script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script> 
    <![endif]--> 

    <!-- Fav and touch icons --> 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico/apple-touch-icon-144-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico/apple-touch-icon-114-precomposed.png"> 
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico/apple-touch-icon-72-precomposed.png"> 
        <link rel="apple-touch-icon-precomposed" href="img/ico/apple-touch-icon-57-precomposed.png"> 
            <link rel="shortcut icon" href="img/ico/favicon.png"> 
    </head> 

    <body> 


    <div id="wrap"> 
     <div class="navbar navbar-fixed-top"> 
      <div class="navbar-inner"> 
       <div class="container"> 
        <a class="btn btn-navbar" data-target=".nav-collapse" 
        data-toggle="collapse"><span class="icon-bar"></span> 
        <span class="icon-bar"></span> <span class= 
        "icon-bar"></span></a> 

        <div class="nav-collapse"> 
         <ul class="nav"> 
          <li class="active"> 
           <a href="#">Menu</a> 
          </li> 

          <li> 
           <a href="#">On Tap</a> 
          </li> 

          <li> 
           <a href="#">Shows</a> 
          </li> 

          <li> 
           <a href="#">Surfwear</a> 
          </li> 

          <li> 
           <a href="#">Contact</a> 
          </li> 
         </ul> 
        </div><!--/.nav-collapse --> 
       </div><!-- container --> 
      </div><!-- navbar-inner --> 
     </div><!-- navbar navbar-fixed-top --> 

     <div class="page-header"> 
      <h1>Sticky footer</h1> 
     </div> 
    </div><!-- Begin page content --> 

    <div class="container"> 
     <div id="push"></div> 
    </div> 

    <footer> 
     <div class="container"> 
      <p class="muted credit">Example courtesy <a href= 
      "http://martinbean.co.uk">Martin Bean</a> and <a href= 
      "http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> 
     </div> 
    <footer> 


    <!-- Le javascript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="js/vendor/jquery-1.9.1.min.js"></script> 
    <script src="js/vendor/bootstrap.min.js"></script> 

    </body> 
</html>

典型引导CSS这对于粘页脚。

/* Sticky footer styles 
     -------------------------------------------------- */ 

     html, 
     body { 
     height: 100%; 
     /* The html and body elements cannot have any padding or margin. */ 
     } 

     /* Wrapper for page content to push down footer */ 
     #wrap { 
     min-height: 100%; 
     height: auto !important; 
     height: 100%; 
     /* Negative indent footer by it's height */ 
     margin: 0 auto -60px; 
     } 

     /* Set the fixed height of the footer here */ 
     #push, 
     footer { 
     height: 60px; 
     } 
     footer { 
     background-color: #f5f5f5; 
     } 

     /* Lastly, apply responsive CSS fixes as necessary */ 
     @media (max-width: 767px) { 
     footer { 
      margin-left: -20px; 
      margin-right: -20px; 
      padding-left: 20px; 
      padding-right: 20px; 
     } 
     } 


body { 
    padding-top: 60px; 
} 
@media (max-width: 979px) { 
    body { 
    padding-top: 0px; 
    } 
}

希望有人能帮助。

丹佛

来源

2013-05-14 Denver

嗨@Denver，你可以把你的HTML代码放在这里吗？你必须认为用户在StackOverflow中做出的每个问题都可能对其他人有用。所以，当你解决你的问题时，你的问题将是无用的，因为我们唯一的HTML代码是你的链接到页面。 – Pigueiras 2013-05-14 06:49:47

绝对看看我的更新。 – Denver 2013-05-14 11:40:26

你的问题之一是身体的“顶部：60px”。把'padding-top：0'。 – Pigueiras 2013-05-14 12:59:10

如果你想在导航栏之前删除的空间，你必须删除您在CSS设置的属性之一：

.navbar .nav, .navbar .nav > li { 
    float: none; <-- 
    ... 
}

如果删除float:none，菜单将与右侧对齐。

来源

2013-05-15 06:22:43 Pigueiras

问题在于页脚中的margin-right: -20px;。这会导致页脚部分扩展并创建滚动。

这里是更新：

footer { 
    margin-left: -20px; 
    /*margin-right: -20px;*/ 
    padding-left: 20px; 
    padding-right: 20px; 
}

希望这有助于。

来源

2013-05-15 06:37:20 Nitesh

没有工作。宽栏仍然存在 – Denver 2013-05-17 22:19:31

在bootstrap.css和bootstrap-responsive.css中将下面的填充值更改为0。或者你可以在你的自定义css文件中覆盖它。

@media(max-width: 767px) { 
    body { 
     padding-right: 20px; 
     padding-left: 20px; 
    } 
}

来源

2013-07-25 02:10:57 Jonathan

边框在屏幕尺寸767px和以下引导程序

回答

相关问题