Bootsrap volle Breite auf Handy

Auf einem Desktop möchte ich 2 Spalten haben. Auf einem Handy möchte ich nur 1 Spalte haben.Bootsrap volle Breite auf Handy

<div class="home"> 
<div class="container-fluid"> 
<div class="row"> 
<div class="col-lg-8 col-md-8 col-xs-12> 
...content--- 
</div> 
<div class="col-lg-4 col-md-4 col-xs-12> 
...content... 
</div> 
</div> 
</div> 
</div>

Leider verwendet dieser Code nicht die volle Breite auf einem Mobiltelefon. Wie kann ich das erreichen?

Quelle

2016-06-23 campfire

-1

Sie haben nach der letzten Klasse keine engen Anführungszeichen.

<div class="col-lg-8 col-md-8 col-xs-12"> 
...content--- 
</div>

Quelle

2016-06-23 16:03:41

, dass es nicht lösen ... Ich habe vergessen, nur es in das Codebeispiel hinzufügen ... Ich habe bereits nach einer Lösung gesucht, aber es scheint, dass dies ein Problem mit Bootstrap ist ... – campfire

Dies ist Soweit ich weiß, kein bekanntes Problem. Was ist mit deinem Inhalt drin? Wenn es nicht in voller Breite in Mobile zeigt, wie sieht es aus? Kannst du einen Screenshot hochladen? –

auf meinem iPhone hat es 1 cm Leerraum auf der rechten Seite und auf der linken Seite – campfire

Überprüfen Sie diesen Code .... möglicherweise lösen Sie Ihr Problem.

<div class="home"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-sm-8 col-lg-8 col-md-8 col-xs-12"> 
       <p>...content------</p> 
      </div> 
      <div class="col-sm-4 col-lg-4 col-md-4 col-xs-12"> 
       <p>...content....</p> 
      </div> 
     </div> 
    </div> 
</div>

Quelle

2016-06-23 16:54:16

nein das hat das Problem auch nicht gelöst :( – campfire

Von dem, was ich über Bootstrap verstehe, würde ich sagen, dass Sie nicht alle Col-Klassen in Ihrem Code benötigen. Nur die col-xs- * Klassen.

<div class="home"> 
<div class="container-fluid"> 
<div class="row"> 
<div class="col-xs-12> 
...content--- 
</div> 
<div class="col-xs-12> 
...content... 
</div> 
</div> 
</div> 
</div>

Die col-xs-12 das gleiche in allen Browsern angezeigt werden, und sie werden auch für kleinere Displays neu formatiert werden.

Und ich möchte hinzufügen, dass die Spalten Zeilen in ihnen haben müssten, aber ich nehme an, dass das der Inhalt ist. Und eine andere Sache ist, um sicherzustellen, dass die verwendeten Spalten bis zu 12 hinzufügen. Das kann auch einige Fehler verursachen

Quelle

2016-06-23 20:24:37

Bootstrap ist zuerst mobil. Es erfordert nur Spaltenklassen am kleinsten Haltepunkt, an dem das Layout geändert werden soll.

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-8> 
     ...content... 
    </div> 
    <div class="col-md-4> 
     ...content... 
    </div> 
    </div> 
</div>

Quelle

2016-06-23 22:48:32

Bootsrap volle Breite auf Handy

Antwort

Verwandte Themen