ブートストラップに2つの画像を並べる

Question

私はこれらの2つの画像を隣り合わせに入れたいですが、画面が小さくなりすぎて互いの上に重ねたいと思っています。

<div class="row"> 

    <div class="col-sm-12"> 
     @if (Model.ThumbnailUrl != null) 
     { 
      <span><img class="thumbnail" src="@Model.ThumbnailUrl" /></span> 
     } 
     @if (Model.SignatureUrl != null) 
     { 
      <span><img class="thumbnail" src="@Model.SignatureUrl" /></span> 

     } 
    </div> 
</div> 

そして、これは生成されたものである：これは私がカミソリに持っているものである

<div class="row"> 
     <div class="col-sm-12"> 
       <span style="display: inline"><img class="thumbnail" src="something.jpg;width=200&amp;height=200"></span> 
       <span style="display: inline"><img class="thumbnail" src="whatever.jpg;width=200&amp;height=200"></span> 
     </div>  
</div> 

そして、これは、それがどのように見えるかです：

彼らはあまりにも積み重ねています早い。スクリーンはフルサイズでした。スモール、エクストラスモールの場合もあります。積み重ねたいのですが、そうでなければ、それらを並べておきます。

これはどのように修正する必要がありますか？基本的に、あなたはあなたのイメージを手配するためにブートストラップの列を使用する必要が

<div class="row"> 
    <div class="col-sm-6"> 
     @if (Model.ThumbnailUrl != null) 
     { 
      <span><img class="thumbnail" src="@Model.ThumbnailUrl" /></span> 
     } 
    </div> 
    <div class="col-sm-6"> 
     @if (Model.SignatureUrl != null) 
     { 
      <span><img class="thumbnail" src="@Model.SignatureUrl" /></span> 
     } 
    </div> 
</div> 

：

Answer 1

がソリューションです：

1 /異なる画面サイズのためのブートストラップ応答のクラスで2列にします。

2 /画像にimg-responsiveクラスを使用して、サイズ変更時に画像のサイズをコンテンツに合わせる。

.row.row-no-margin { 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
} 
 

 
.col-no-padding { 
 
    padding-left: 0 !important; 
 
    padding-right: 0 !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row row-no-margin"> 
 
     <div class="col-xs-12 col-sm-6 col-no-padding"> 
 
      <img class="thumbnail img-responsive" src="http://placehold.it/600x400"> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-no-padding"> 
 
      <img class="thumbnail img-responsive" src="http://placehold.it/600x400"> 
 
     </div> 
 
</div>

Answer 2

はこのような何かを試してみてください。今は、各画像の行全体の幅であるサイズ12の列を作成しています。詳細については

：ここ https://getbootstrap.com/examples/grid/