如何刪除Bootstrap中的這個水平滾動條3

我的引導頁面上有這個令人煩惱的水平滾動條。無法弄清楚是什麼讓它表現得像這樣或者該怎麼做？如何刪除Bootstrap中的這個水平滾動條3

的jsfiddle鏈接：http://jsfiddle.net/FatAlbert/cd1syrd9/2/

HTML：

<body> 
    <div class="wrapper"> 
     <div class="row"> 
      <div class="header"> 
       <div class="container"> 
        <!-- navigation--> 
         <nav class="navbar navbar-default"> 
          <div class="container-fluid"> 

           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">Meny</button> 
           <a class="navbar-brand" href="#"><img src="xxx" /></a> 

           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
            <ul class="nav navbar-nav"> 
             <li class="active"><a href="#">Start <span class="sr-only">(current)</span></a></li> 
             <li><a href="#">Link</a></li> 
             <li><a href="#">Link</a></li> 
             <li><a href="#">Link</a></li> 
             <li><a href="#">Link</a></li> 
            </ul> 
           </div> 
          </div> 
         </nav><!--/navigation--> 
       </div> 
      </div><!--/header--> 
     </div><!--/container--> 
     <div class="row"> 
      <div class="first-page-content"> 
       <div class="container"> 
         <img class="img-responsive img-big" src="xx" /> 
         <p> 
          Lorem ipsum dolor sit amet, arcu nulla. Maecenas congue, felis leo et, pulvinar sollicitudin lacinia libero rhoncus, nam dolor, velit leo ullamcorper massa. Risus netus facilisis tempus mollis, nullam nibh ridiculus potenti donec pulvinar proin. Sit in ultrices sed orci pellentesque, nunc tempor fusce fusce ultrices felis molestie. Lorem nam pellentesque integer urna nam. 
         </p> 

       </div> 
      </div> 
     </div><!--/first-content--> 
    </div> 
    <div class="footer"> 
     <div class="container"> 
      <p class="pull-right"> 
       Some<br /> 
       Info<br /> 
      </p> 
     </div> 

    </div><!-- /footer--> 

</body>

CSS：

html { 
    position: relative; 
    min-height: 100%; 
} 

body { 
    margin-bottom: 160px; 
} 

h1 { 
    font-size: 2.5em; 
} 

h2 { 
    font-size: 1.5em; 
} 

p { 
    font-family: Verdana,Arial,sans-serif; 
    font-size: 1.05em; 
    line-height: 1.8; 
    text-align: justify; 
} 

a { 
    color: #0071BB; 
    font-weight: bold; 
} 

.wrapper { 
} 

.footer { 
    position: absolute; 
    padding-top: 25px; 
    bottom: 0; 
    width: 100%; 
     /* Set the fixed height of the footer here */ 
    height: 160px; 
    background-color: #5FC8FF; 
} 

.header .glyphicon-wrench { 
    margin: 0 3px; 
} 

.header h4 { 
    margin-right: 3px; 
} 

.img-responsive { 
    display: block; 
    margin: auto; 
} 

.img-responsive.img-big { 
    margin-top: 75px; 
} 

.navbar { 
    border: none; 
} 

.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
    vertical-align: top; 
} 

.navbar .navbar-collapse { 
    text-align: center; 
} 

.navbar-default .navbar-nav > li { 
    width: 150px; 
    margin-right: 2px; 
} 

.navbar-default .navbar-nav > li > a, 
    .navbar-default .navbar-nav > li > a:hover { 
    color: #fff; 
    font-weight: bold; 
    background-color: #92C7E1; 
} 

.navbar-default .navbar-nav > li > a:hover { 
    background-color: #98CEE5; 
} 

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 
    color: #fff; 
    background-color: #98CEE5; 
} 

a.navbar-brand { 
    padding: 5px; 
} 

.row { 
} 

.alert { 
} 

.well { 
} 

.footer p { 
    font-weight: bold; 
    color: #FDFDFB; 
} 

@media (min-width: 992px) { 
} 

@media (min-width: 768px) { 

    .first-page-content p { 
     margin: 75px auto 25px auto; 
     width: 524px; 
    } 
}

來源

2015-01-03 FatAlbert

你的意思是水平滾動？垂直滾動將在任何時候顯示出內容超過水平的角度 – jmore009

- 是的。 tnx @ jmore009 – FatAlbert

看到我的評論，只需在CSS中添加此代碼，它將完全禁用您的水平滾動條。 – vasanth

按Bootstrap 3 documentation：

行必須放置在.container（固定寬度）或.container-fluid（全寬度）內才能正確對齊和填充。

因此，將類container添加到您的.wrapper元素。

Updated Example

<div class="wrapper container"> 
    <div class="row"> 
     ... 
    </div> 
</div>

作爲用於解釋，.row類具有在每一側-15px邊距。

.row { 
    margin-right: -15px; 
    margin-left: -15px; 
}

的.container類有效地取代以下列：

.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
}

除了閱讀Bootstrap 3 docs，我建議你閱讀這篇文章「The Subtle Magic Behind Why the Bootstrap 3 Grid Works」。

來源

2015-01-03 19:06:59

謝謝！你也解決了我的粘性頁腳問題，也沒有工作。 – FatAlbert

非常感謝！行必須放置在.container（固定寬度）或.container-fluid（全寬度）內，以便正確對齊和填充。 – victorkurauchi

就我而言，我無法使用.container，因爲它在較小的設備上具有固定的寬度。我用.container-fluid修復了這個問題。 –

只需將此代碼複製到您的CSS，它將禁用您的水平滾動條。

body {overflow-x: hidden;}

來源

2015-10-26 07:25:23 vasanth

+14

這隻會隱藏瀏覽器滾動條。這個。行元素仍然會超出範圍，並且您在大多數移動設備上都會遇到問題。 –

該問題基本上是由於父容器丟失造成的。解決方法是，您可以向該行添加一個.no-container類，並添加margin：0以補償行類的負邊距。

見下面的CSS和HTML標記代碼：

.no-container { 
 
    margin-left: 0 !important; 
 
    margin-right: 0 !important; 
 
} 
 
.row { 
 
    border: 1px solid #999; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!--<div class="container"> Container is commented --> 
 
<div class="row no-container"> 
 
    <div class="col-md-6 col-xs-6 col-sm-6">column-6</div> 
 
    <div class="col-md-6 col-xs-6 col-sm-6">column-6</div> 
 
</div> 
 
<!--</div> Container ends here -->

來源

2016-10-04 09:05:44

如何刪除Bootstrap中的這個水平滾動條3

回答

相關問題