如何將3張圖像嵌入到w/bootstrap中？

由於我一直在爲我的JavaScript類啓動一個頁面的webapps，我認爲把一個地方放在一起來存儲它們並將它們鏈接起來是個不錯的主意。如何將3張圖像嵌入到w/bootstrap中？

與android或ios類似，我有一個包含多個圖標的頁面，用於指向應用程序的鏈接。我已經能夠將它們置於中心位置，但我遇到了一些障礙。我面臨的問題是我如何正確地擴展它們。我不希望讓他們跨越整個網頁。

目前我的HTML如下所示：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="content col-xs-4"> 
      <a href="./flickr" class="img responsive"> <img alt="Flickr" style="height: 100%; width: 100%; display: block;" src="css/img/flickr.png" data-holder-rendered="true"> </a> 
     </div> 
     <div class="content col-xs-4"> 
      <a href="./notepad" class="img responsive"> <img alt="Notepad" style="height: 100%; width: 100%; display: block;" src="css/img/notepad.png" data-holder-rendered="true"> </a> 
     </div> 
     <div class="content col-xs-4"> 
      <a href="http://aug.ie" class="img responsive"> <img alt="Url Shortener" style="height: 100%; width: 100%; display: block;" src="css/img/link.png" data-holder-rendered="true"> </a> 
     </div>   
    </div> 
</div>

今後如果當我創造更多的應用程序，我想有這個頁面上添加一個圖標，並鏈接到它的一個相當簡單的時間。 bootstrap是否包含調整列大小的方法，或者我應該調整行大小？

我現在在陌生的領域，所以任何幫助將不勝感激。謝謝！

來源

2016-04-22 Augie Luebbers

我真的不知道你爲什麼這樣做：

style="height: 100%; width: 100%; display: block;"

這是多餘的，因爲引導這是否出與img-responsive類的框。但是，在你的代碼示例，你已經寫：的img responsive代替img-responsive

你說：

我不想讓他們跨越整個網頁。

如果您使用container它包含12列網格內的所有項目。如果您使用container-fluid它跨越整個網頁。

在我的例子中，我使用了col-sm-4。只要你的頁面是768px或更高，它會將3列內聯。如果您想在手機上使用3列並使用col-xs-4。但總是要確保你總共得到12個。

試試這個：

<div class="container"> 
     <div class="row"> 
      <div class="content col-sm-4"> 
       <a href="./flickr" class="img-responsive"> <img alt="Flickr" src="css/img/flickr.png" data-holder-rendered="true"> </a> 
      </div> 
      <div class="content col-sm-4"> 
       <a href="./notepad" class="img-responsive"> <img alt="Notepad" src="css/img/notepad.png" data-holder-rendered="true"> </a> 
      </div> 
      <div class="content col-sm-4"> 
       <a href="http://aug.ie" class="img-responsive"> <img alt="Url Shortener" src="css/img/link.png" data-holder-rendered="true"> </a> 
      </div>   
     </div> 
    </div>

來源

2016-04-22 07:12:44 Christophvh

我有一個名爲img的自定義類，可以增加懸停時的大小。不過謝謝你的寶貴見解。此外，我不確定爲什麼我使用了一些我正在使用的類。 –

請嘗試以下之一：

.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>

來源

2016-04-22 06:53:35

你能解釋一下你的答案呢？ –

如何將3張圖像嵌入到w/bootstrap中？

回答

相關問題