表示画像

Question

私はブートストラップ4アルファ6を使用していると私は3枚の画像を表示したいと思い、私は.screens上や画像の表示オプションを変更するすべてのものを試してみましたが、私はアウトだ

<div class="row"> 
<div class="col-md-4 text"> 
    <p>with some text</p> 
</div> 
<div class="col-md-8 screens"> 
    <img class="img-fluid first" src="{{asset('/images/project/screen-1.png')}}" alt="First screen"> 
    <img class="img-fluid main" src="{{asset('/images/project/screen-main.png')}}" alt="Main screen"> 
    <img class="img-fluid second" src="{{asset('/images/project/screen-2.png')}}" alt="Second screen"> 
    </div> 
</div> 

をインライン化

Answer 1

応答性画像の場合、画像にはサイズを調整できる個々のコンテナが必要です。あなたが持っている例では、1つのコンテナに3つのイメージがあるので、それらはその単一のコンテナに個別に適応しません。あなたはそれすなわち表示にCSSを適用してみました

.row li { 
 
    width: 33.3%; 
 
    float: left; 
 
} 
 

 
img { 
 
    border: 0 none; 
 
    display: inline-block; 
 
    height: auto; 
 
    max-width: 100%; 
 
    vertical-align: middle; 
 
}

<div class="row"> 
 
    <div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center"> 
 
    <ul> 
 
     <li> 
 
     <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" /> 
 
     </li> 
 
     <li> 
 
     <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" /> 
 
     </li> 
 
     <li> 
 
     <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" /> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>