web-dev-qa-db-ja.com

bootstrap 3.0 1行に5枚の画像を表示

bootstrap 3.0が1つの行に5つのイメージを作成し、それらをレスポンシブにしますか？

また、タブレットまたはスマートフォンで表示したときに480ピクセル未満で作成できるのは、RAWごとに2つの画像になりますか？現在、5つの画像が下に表示されていますか？

ここに私のコードがあります：

<div class="row">
 <div class="col-md-2">
 <img class="img-responsive" src="/images/img1.jpg" />
 </div>
   <div class="col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-md-2">
 <img class="img-responsive" src="/images/img3.jpg" />
 </div>
   <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
  <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>

ご覧のとおり、img-responsiveとともにcol-md-2を使用していますか？しかし、その中心にないため、実際には機能していません

htmlcsshtml5twitter-bootstrap-3
16
user3150060

どちらの側にも空の列がある場合があります。

<div class="row">
 <div class="col-md-2 col-md-offset-1">
   <img class="img-responsive" src="/images/img1.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-md-2">
   <img class="img-responsive" src="/images/img3.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>
11
Steve Sanders

他の質問に答えるには：

また、タブレットまたはスマートフォンで表示したときに480ピクセル未満で作成できるのは、RAWごとに2つの画像になりますか？現在、5つの画像が下に表示されていますか？

答えはイエスです。さらに、col-xs-6を追加して使用すると、768px未満のすべてのビューポートの行ごとに2つの画像を取得できます。

<div class="row">
 <div class="col-xs-6 col-md-2 col-md-offset-1">
   <img class="img-responsive" src="/images/img1.jpg" />
 </div>
 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img3.jpg" />
 </div>
 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>

Bootstrapを介してLESS、SASS、またはカスタマイザーを使用する場合： http://getbootstrap.com/customize/ ）、両方のグリッドを確実に適合させることができます。列とブレークポイント。つまり、10列グリッドまたは5列グリッドを作成でき、xsブレークポイントを480pxにしたい場合は、それを行うことができます

そのためには、グリッドシステムの値を編集する必要があります。 http://getbootstrap.com/customize/#grid-system および http://getbootstrap.com/customize /＃media-queries-breakpoints

まだBootstrap=すべての長所がありますが、要件に合わせたカスタムバージョンです。

8
jme11

列クラスを作成する必要があります（私はそれをcol-sm-5colsが、Bootstrapの既存の列と同じようにスタイルを設定し、メディアクエリを介して適切なサイズで20％の幅を指定して、好きな名前を付けて呼び出します。

.col-sm-5cols{
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

@media (min-width: 768px) {
.col-sm-5cols {
        width: 20%;
        float: left;
    }
}

例： http://www.bootply.com/YpKhYwVqfD

また、モバイルで2列の設定を行うには、col-sm-6を取得するか、480pxのメディアクエリとwidth:50%

2
Shawn Taylor