創建響應行

我試圖創建一個響應行，當在iPad上顯示時，3個圖像像在桌面上一樣穿過屏幕。目前，他們的行爲就像他們在移動和垂直擴展，而不是水平。創建響應行

的圖像是網站上的3系列產品圖片：http://dekatest.neto.com.au/

<div class="container" style="text-align:center;"> 
 
<div class="row"><img alt="" src="/assets/images/MEDICAL-RANGE.jpg" style="max-width:100%;" /><img alt="" src="/assets/images/SPROTS-RANGE.jpg" style="max-width:100%;" /><img alt="" src="/assets/images/WELLBEING-RANGE.jpg" style="max-width:100%;" /></div> 
 
</div>

來源

2016-03-01 David

我想你正在使用的引導。你需要將你的圖像包裝在列中。例如。

– reinder

如果您使用的引導嘗試這樣的事情

<div class="container text-center"> 
    <div class="row"> 
     <div class="col-sm-4"> 
     <img alt="" src="/assets/images/MEDICAL-RANGE.jpg" /> 
     </div> 
     <div class="col-sm-4"> 
     <img alt="" src="/assets/images/SPROTS-RANGE.jpg" /> 
     </div> 
     <div class="col-sm-4"> 
     <img alt="" src="/assets/images/WELLBEING-RANGE.jpg" /> 
     </div> 
    </div> 
</div

，並用CSS加您的標籤的屬性和樣式

img { max-width: 100%; }

注意：您應該更改col-sm-*的值，具體取決於您嘗試執行的操作。

來源

2016-03-01 05:26:04

這真的很好！謝謝。不過，我似乎無法在桌面上正確地集中整個事情。似乎是推動了正確的技能。 – David

@David'class =「text-center」'不適合你？ –

它似乎不是:( – David

如果你只是使用行，只是因爲你不需要在圖像之間填充。如此簡單的是，爲控制col-sm的填充而製作單獨的類。您應該在row內使用col-*，那麼它會正常工作。

CSS

.no-p{ 
    padding-left:0px; 
    paddding-right:0px; 
    }

HTML

<div class="container text-center"> 
     <div class="row"> 
      <div class="col-xs-4 no-p"> 
      <img class="img-responsive" alt="" src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" /> 
      </div> 
      <div class="col-xs-4 no-p"> 
      <img class="img-responsive" alt="" src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" /> 
      </div> 
      <div class="col-xs-4 no-p"> 
      <img class="img-responsive" alt="" src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" /> 
      </div> 
     </div> 
    </div>

觀的jsfiddle：https://jsfiddle.net/L2y3ybff/

來源

2016-03-01 05:52:00

回答

相關問題