Wie macht man 3 Säulen mobil freundlich?

Question

Ich habe versucht, es selbst herauszufinden, aber hat nicht gut für mich gearbeitet. Ich benutze Bootstrap und versuche, die richtige Version für mobile Benutzer zu machen. Jetzt sieht es auf mobilen Geräten schrecklich aus. Ich denke, das Problem ist mit Div-Klassen, die ich versuchte, sie zu ändern, aber hat mir nicht so viel geholfen.

Hier ist mein Code:

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-4 content"> 
      <ul class="featuresBody"> 
       <li><i class="icofont icofont-simple-right"></i>Unlimited Domains & Subdomains</li> 
       <li><i class="icofont icofont-simple-right"></i>Ulimited Email Addresses</li> 
       <li><i class="icofont icofont-simple-right"></i>Unlimited Databases (MySQL)</li> 
       <li><i class="icofont icofont-simple-right"></i>Unlimited Bandwidth</li> 
       <li><i class="icofont icofont-simple-right"></i>SSH, sFTP/FTP acess</li> 
      </ul> 
     </div> 
     <div class="col-xs-4 content"> 
      <ul class="featuresBody"> 
       <li><i class="icofont icofont-simple-right"></i>PHP 5/7, Perl 5, Python, Zend, phpMyAdmin</li> 
       <li><i class="icofont icofont-simple-right"></i>One Click CMS Install</li> 
       <li><i class="icofont icofont-simple-right"></i>Cron Job Manager</li> 
       <li><i class="icofont icofont-simple-right"></i>SSL Certificate</li> 
       <li><i class="icofont icofont-simple-right"></i>POP3, IMAP, SMTP For E-Mail</li> 
      </ul> 
     </div> 
     <div class="col-xs-4 content"> 
      <ul class="featuresBody"> 
       <li><i class="icofont icofont-simple-right"></i>Daily Backups</li> 
       <li><i class="icofont icofont-simple-right"></i>Detailed Logs & Statistics</li> 
       <li><i class="icofont icofont-simple-right"></i>Protection From Viruses</li> 
       <li><i class="icofont icofont-simple-right"></i>Advanced DDoS Protection</li> 
       <li><i class="icofont icofont-simple-right"></i>24/7 Support</li> 
      </ul> 
     </div> 
    </div> 
</div> 

Dank! P.S Wie kann ich Seiten auf mobilen Geräten einfach testen?

Answer 1

Bei der Verwendung von Bootstrap bedeutet die Klasse col-xs, dass die Spalte und was auch immer darin enthalten ist, so oft gequetscht wird, wie es für den Inhalt eines Mobiltelefons erforderlich ist. Wenn Sie 3 Spalten nebeneinander auf Ihrem Desktop- oder Laptop-Monitor haben, ist das sinnvoll, da jede der 3 Spalten groß genug ist, damit Sie sie lesen können. Wenn dies bei Ihrer Situation der Fall ist (was ich denke), sollten Sie diese col-xs zu col-md oder sogar col-lg ändern. Dies führt dazu, dass die Spalten nicht auf den mobilen Bildschirm passen, sondern übereinander gestapelt werden, sodass Sie zuerst die Spalte ganz links sehen, dann nach unten blättern, in der Mitte die Spalte und dann weiter unten sehen Sie die rechte Spalte.

Answer 2

Versuchen Sie folgendes:

<div class="col-sm-12 col-md-4 content"> 

Spalten auf vertikale mobile Geräte nicht gut funktionieren. Sie sollten stattdessen Zeilen bevorzugen.

Answer 3

Sie verwenden die besonders kleine Bootstrap (xs) Spaltengröße. xs erstellt immer Spalten, egal wie klein das Ansichtsfenster ist. Verwenden Sie stattdessen sm, md, lg, d. H. col-sm-4.

Siehe Bootstrap Grid Options.

Sie können dem gleichen Element auch mehrere Spaltenklassen für noch mehr Kontrolle bereitstellen. Zum Beispiel Spalten mit 50% Breite auf kleinen Mobilstationen und Spalten mit 33,333% Breite auf größeren Vorrichtungen, d. H. <div class="col-xs-6 col-md-4">.

Answer 4

Zwei Dinge, die ich hinzufügen möchte, könnten Sie Col-xs-4 mit Col-sm-4 so ersetzen, dass sie für eine mobile Bildschirmansicht nicht eng sind. Zweitens Ihr i-Tag für Listenelemente (kleiner grüner Pfeil). Machen Sie es absolut Position, auf diese Weise, wenn der Wortumbruch auftritt, sieht es nicht seltsam aus.

.featuresBody > li i.icofont-simple-right { 
    left: 10px; 
    position: absolute; 
    top: 10px; 
} 
.featuresBody > li { 
    position: relative; 
}