在桌面上動態對齊圖像3，在手機上動態對齊

我有一個上傳組件，可以在用戶將它們上載到服務器之前預覽所選圖像。在桌面上動態對齊圖像3，在手機上動態對齊

我想在桌面上顯示最多3個，平板電腦上最多顯示2個，手機上顯示最多1個。

我不知道用戶將上傳多少圖片，因此它是一個動態數量。

上傳的例子會爲4個文件生成類似的內容。

<div> 
    <div> 
    <div class="thumbnail"> 
     <div class="caption"> 
     <h3> 
      <span>fixed_bug.png</span> 
      </h3> 
      <p> 
      <a href="#" class="btn btn-danger btn-responsive">Delete</a> 
      </p> 
     </div> 
     <img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail"> 
    </div> 
    </div> 
    <div> 
    <div class="thumbnail"> 
     <div class="caption"> 
     <h3><span>obomber.jpg</span></h3> 
     <p> 
      <a href="#" class="btn btn-danger btn-responsive">Delete</a> 
     </p> 
     </div> 
     <img src="blob:http%3A//localhost%3A3030/498e5d16-114e-41b5-8d4d-4e798c36861c" class="img-thumbnail"> 
    </div> 
    </div> 
    <div> 
    <div class="thumbnail> 
     <div class="caption"> 
     <h3><span>podcasts.png</span></h3> 
     <p><a href="#" class="btn btn-danger btn-responsive">Delete</a></p> 
     </div> 
     <img src="blob:http%3A//localhost%3A3030/08a89a31-6822-4436-a8be-e89ddfee9f0f" class="img-thumbnail"> 
    </div> 
    </div> 
    <div> 
    <div class="thumbnail"> 
     <div class="caption"> 
     <h3><span>tangents.png</span></h3> 
     <p> 
      <a href="#" class="btn btn-danger btn-responsive">Delete</a> 
     </p> 
     </div> 
     <img src="blob:http%3A//localhost%3A3030/ae1c844f-f0d2-4a50-a0b1-c46b4c00a4ba" class="img-thumbnail"> 
     </div> 
    </div> 
    </div>

來源

2016-01-24 dagda1

不確定您的要求。但是使用Bootstrap GRID系統在'div'中顯示你的圖像，使用'.col-lg-4'作爲桌面，'.col-md-6'作爲平板電腦，'col-xs-12'作爲手機使用。 –

@JyothiBabuAraja將它添加到包含所有圖像的div或包含圖像的div中 – dagda1

每個圖像都必須放置在帶有引導類的單獨div中。以下答案適用於您。 –

因此，作爲一些評論說，使用引導網格系統，是非常有用的，這都可以通過使用此

http://getbootstrap.com/css/#grid

這裏是東西，你可能能夠做的實現使用對不起我的手機上的那一刻可能是粗糙：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 
       <div class="caption"> 
 
        <h3> 
 
        <span>fixed_bug.png</span> 
 
        </h3> 
 
        <p> 
 
         <a href="#" class="btn btn-danger btn-responsive">Delete</a> 
 
        </p> 
 
       </div> 
 
       <img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail"> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 
       <div class="caption"> 
 
        <h3> 
 
        <span>fixed_bug.png</span> 
 
        </h3> 
 
        <p> 
 
         <a href="#" class="btn btn-danger btn-responsive">Delete</a> 
 
        </p> 
 
       </div> 
 
       <img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail"> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 
       <div class="caption"> 
 
        <h3> 
 
        <span>fixed_bug.png</span> 
 
        </h3> 
 
        <p> 
 
         <a href="#" class="btn btn-danger btn-responsive">Delete</a> 
 
        </p> 
 
       </div> 
 
       <img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2016-01-24 14:32:35

在桌面上動態對齊圖像3，在手機上動態對齊

回答

相關問題