Come rimuovere questa barra di scorrimento orizzontale in Bootstrap 3

Ho questo fastidioso scorrimento orizzontale sulla mia pagina di bootstrap. Non riesci a capire cosa sta facendo comportarsi come questo o cosa fare al riguardo?Come rimuovere questa barra di scorrimento orizzontale in Bootstrap 3

JsFiddle link: 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; 
    } 
}

fonte

2015-01-03 FatAlbert

vuoi dire uno scorrimento orizzontale? Uno scroll verticale sta per apparire ogni volta che il contenuto si estende oltre il punto di vista – jmore009

orizzontale - sì. tnx @ jmore009 – FatAlbert

Vedere il mio commento, basta aggiungere questo codice nel CSS per disabilitare completamente la barra di scorrimento orizzontale. – vasanth

Secondo Bootstrap 3 documentation:

Le file devono essere posizionate all'interno di un contenitore (a larghezza fissa) o di un contenitore (a tutta larghezza) per un corretto allineamento e riempimento.

Pertanto, aggiungere la classe container all'elemento .wrapper.

Updated Example

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

quanto una spiegazione, la classe .row ha -15px margini su ciascun lato.

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

Il .container classe sposta in modo efficace che con il seguente:

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

Oltre a leggere il Bootstrap 3 docs, io suggerirei di leggere l'articolo "The Subtle Magic Behind Why the Bootstrap 3 Grid Works".

fonte

2015-01-03 19:06:59

Grazie! Hai anche risolto il mio problema con il piè di pagina appiccicoso che non ha funzionato neanche. – FatAlbert

Grazie mille !!! Le righe devono essere posizionate all'interno di un contenitore (larghezza fissa) o di un contenitore (a tutta larghezza) per un corretto allineamento e riempimento. – victorkurauchi

Nel mio caso, non ho potuto utilizzare .container perché ha una larghezza fissa su dispositivi più piccoli. Lo aggiusto con .container-fluid. –

Basta copiare questo codice sul CSS, disabiliterà la barra di scorrimento orizzontale.

body {overflow-x: hidden;}

fonte

2015-10-26 07:25:23 vasanth

+14

Ciò nasconderà solo la barra di scorrimento del browser. Il .l'elemento row sarà ancora fuori dai limiti e avrai problemi con la maggior parte dei dispositivi mobili. –

Il problema è causato principalmente a causa del padre .container mancante. La soluzione è che è possibile aggiungere una classe .no-container alla riga e aggiungere margine: 0 per compensare il margine negativo della classe di riga.

Vedere il sottostante codice CSS e HTML markup:

.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 -->

fonte

2016-10-04 09:05:44

Come rimuovere questa barra di scorrimento orizzontale in Bootstrap 3

risposta

Problemi correlati