Question

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

Answer 1

如果你正在使用Bootstrap尝试类似这样的事情

<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-*的值。

Answer 2

如果你只是因为你不使用行，你不需要在图像之间填充。如此简单，就是为控制col-sm的填充制作单独的类。你必须在col-*内使用row然后才能正常工作。

<强> 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/

创建响应行

2 个答案: