创建响应行

我试图创建一个响应行，当在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

回答

相关问题