Wie horizontal Hahn deaktivieren, wenn Inhalte auf mobilen Bildschirm passen

-2

Bootstrap 3 Warenkorb wie Bootstrap-Standard-Markup definiert werdenWie horizontal Hahn deaktivieren, wenn Inhalte auf mobilen Bildschirm passen

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
<body>  
    <div class="container"> 
     <div id="_info"></div> 

     <header class="row"> 
      <div class="col-xs-12"> 
    </header> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">L&#252;li navigeerimist</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li> 

     ....

In mobilen dessen Inhalt Breite als mobile Bildschirmbreite gleich ist.

Der Benutzer kann Inhalte jedoch horizontal nach links ziehen, so dass auf der linken Seite ein unschöner weißer Bereich erscheint.

Wie behebt man dies, so dass ein unnötiges Links Ziehen nicht erlaubt ist? Vielleicht verursacht ein Element in der Seite diesen Effekt?

Ich habe versucht, Elemente in der Registerkarte Elemente von Chrome-Entwicklertools zu löschen, aber horizontales Scrollen ist weiterhin erlaubt.

Quelle

2017-01-23 Andrus

Und hier ist das Problem: http://i.imgur.com/m6f3bRW.png –

In einigen Seiten horizontale Scroll ist erforderlich, so dass es nicht immer deaktiviert werden kann. Ich erwarte, dass es automatisch vom Browser deaktiviert wird, wenn es nicht benötigt wird. Wide Element in bereitgestellten Bild gezeigt wird wahrscheinlich von Facebook-Skript erstellt. Wie erzwinge Facebook die richtige Breite? – Andrus

Das Problem ist Ihre Kopf- und Fußzeile haben beide eine feste Breite zu ihnen. Dies würde normalerweise kein Problem mit dem richtigen Medien-Anfragen, aber meiner Meinung nach, um nicht über das Hinzufügen von mehr Medienanfragen zur Sorge haben würde ich nur für den Header CSS ändern, wie ich unten habe:

@media only all and (min-width: 481px) 
    header, .wrap { 
     width: 100%; 
     margin: 0 auto; 
    }

Für die Fußzeile, Sie haben eine Facebook-Symbolleiste, die eine Menge hard-Inline-Breiten hat. Sie können dies zusammen hacken, indem Sie das gesamte Element in ein div einbinden und width: 100%; overflow: hidden; auf dieses div anwenden, aber ich würde Ihnen dringend empfehlen, mehr Nachforschungen über dieses Plugin zu machen, damit es richtig funktioniert oder ein besseres Plugin findet, das Ihnen bessere Ergebnisse liefert.

Quelle

2017-01-24 03:01:03 Matthew

Danke. Breite wurde eingefügt: 100% Ich entfernte die Breite aus dem Stil, wie in Valius79 Antwort beschrieben. Ist das ok ? – Andrus

Das war es auf meinem comp. Ich habe nur die eingestellte Breite des Headers deaktiviert.

Quelle

2017-01-23 22:44:32 Vcasso

Wie horizontal Hahn deaktivieren, wenn Inhalte auf mobilen Bildschirm passen

Antwort

Verwandte Themen