これは私のコードレイアウトを整理して反応させるには?
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h2 class="page-header"> Utenti online </h2>
</div>
</div>
<!-- fine row1 -->
<div class="row">
<div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
<div class="useronline">
<img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px">
<b style="margin:10px;"> Marco </b>
</div>
</div>
<div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
<div class="useronline">
<img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px">
<b style="margin:10px;"> Marco </b>
</div>
</div>
<div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
<div class="useronline">
<img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px">
<b style="margin:10px;"> Marco </b>
</div>
</div>
<div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
<div class="useronline">
<img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px"/>
<b style="margin:10px;"> Marco </b>
</div>
</div>
<div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
<div class="useronline">
<img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px">
<b style="margin:10px;"> Marco </b>
</div>
</div>
</div>
</div>
の画像で、COL-LGは10ですが、SMは25 私の質問では、次のとおりです。どのようにレイアウトを整理してすべての画面で反応させますか?
変更この:
<div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
これに
特定のブレークポイントで表示する画像の数によって異なります。 – makshh
lg:5画像、md:4画像、sm:3、xs:2画像 – Ibernato93