web-dev-qa-db-ja.com

Bootstrap 4つの画像のサムネイルクラス

bootstrap 3.3.7を使用して以下のHTMLコードを取得しました。サムネイルクラスを使用すると、画像のサイズを変更してグリッドに完全に合わせることができます。

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Project</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 </head>

<div class="container">
  <h2>Pictures of Coffee</h2>
  <div class="row">
 <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
    <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
    <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
    <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
    <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
    <div class="col-lg-4 col-xs-6 thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div> 
  </div>
</div>

 </body>
 </html>

ただし、サムネイルクラスはbootstrap 4.0 https://getbootstrap.com/docs/4.0/layout/grid/ に存在しないようです。次のHTMLリンクのrelを置き換えることを試みることができる問題

 <link rel="stylesheet"
 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
 integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
 crossorigin="anonymous">

あなたは画像が場所から外れるのを見ることができます、そして4.0で同じ結果を達成するために同様のクラスが何であるかを知りたいのです。または私はbootstrap 3.3.7に頼らなければなりませんか？

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4
6
csamleong

docs v4 によると、img-thumbnailを探しています（これはcol-*-*ではなくimgタグで使用する必要があります）

注：

  • V4では、col-xsはcol-に置き換えられました
  • 画像をレスポンシブにするためにimg-fluidユーティリティクラスを追加しました
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <h2>Pictures of Coffee</h2>
  <div class="row">
    <div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
    <div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
    <div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
    <div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
    <div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
    <div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
  </div>
</div>
10
dippas

Bootstrap 4では、次のことができます。

列col-xs-はもう存在しないため、col-に置き換えます。デフォルトはxsです。

サムネイルについては、img要素ではなくdiv要素でimg-thumbnailクラスを使用できます。

さらに、各列と行で0パディングを実現するために、カスタムスタイルルールを追加して、Bootstrapのパディングをオーバーライドできます。

    .row > .col-lg-4,
       .col-6 {
               padding: 0;
       }

結果のBootstrap 4ファイルは次のようになります：

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Project</title>
        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
            .row>.col-lg-4,
            .col-6 {
                padding: 0;
            }

        </style>
    </head>
    <div class="container">
        <h2>Pictures of Coffee</h2>
        <div class="row">
            <div class="col-lg-4 col-6">
                <img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt="">
            </div>
            <div class="col-lg-4 col-6">
                <img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt="">
            </div>
            <div class="col-lg-4 col-6">
                <img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt="">
            </div>
            <div class="col-lg-4 col-6">
                <img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt="">
            </div>
            <div class="col-lg-4 col-6">
                <img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt="">
            </div>
            <div class="col-lg-4 col-6">
                <img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt="">
            </div>
        </div>
    </div>
    </body>

    </html>

お役に立てれば。

2
devisscher