3つの列をモバイルフレンドリーにする方法は？

Question

私は自分でそれを理解しようとしていましたが、私にとってうまくいきませんでした。 私はブートストラップを使用しており、モバイルユーザー向けに適切なバージョンを作成しようとしています。 これはモバイルデバイスではひどく見えます。 私は問題をdivクラスと考えています。私はそれらを変更しようとしていましたが、それほど助けにはなりませんでした。

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

ありがとう：

は、ここに私のコードです！ P.モバイルデバイスでページを簡単にテストするにはどうすればよいですか？

Answer 1

ブートストラップを使用するとき、col-xsクラスは、列とその中にあるものが内容を携帯電話に合わせるのに必要なだけ押しつぶされることを意味します。デスクトップまたはラップトップモニターに3つの列が並んでいる場合は、3つの列のそれぞれがそれを読むのに十分な大きさなので、意味があります。 これがあなたの状況に当てはまる場合は、col-xsをcol-mdまたはcol-lgに変更することを検討してください。これにより、列が移動画面に収まるようにスケッチされず、代わりに列の上に重ねて表示されるので、一番左の列が最初に表示され、次に下にスクロールし、中央に列が表示され、さらに下に、右の列が表示されます。

Answer 2

これを試してみてください：

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

列が縦モバイルデバイス上でうまく動作しません。代わりに行を優先する必要があります。

Answer 3

ブートストラップの余分な小さな（xs）サイズを使用しています。 xsは、ビューポートの大きさにかかわらず常に列を作成します。代わりにsm、md、lgを使用してください。つまり、col-sm-4です。

Bootstrap Grid Optionsを参照してください。

同じ要素に複数の列クラスを指定することで、より多くの制御を行うこともできます。たとえば、小型モバイルの場合は50％幅の列、大きいデバイスの場合は33.333％の幅の列、つまり<div class="col-xs-6 col-md-4">です。

Answer 4

2つのものを追加したいと思います。col-xs-4をcol-sm-4に置き換えることもできます。 モバイル画面ビューでは窮屈にならないようにします。第二に、あなたのリストアイテム用のタグ（小さな緑色の矢印）それは単語ラップが発生したときに絶対に、そのようにして、それは奇妙に見えません。

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