Question

我有以下HTML代码：

u''

使用bootstraps列方法，在lg和md中显示为6个图像，分为两行，每行3个图像。图像响应并调整大小，它看起来我想要它。在sm处，然后扩展列以使每个图像彼此堆叠在一起。我使用了以下CSS，以便图像中心自己。

 <div class="row">
               <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="padding-top: 30px; padding-bottom: 0px;">
                   <div id="what-we-do">
                       <a href="builtupletters.htm"><img class="img-responsive img-rounded" src="images/builtupletters370x280.png"></a>
                   </div>
               </div>
               <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="padding-top: 30px; padding-bottom: 0px;">
                   <div id="what-we-do">
                       <a href="builtupletters.htm"><img class="img-responsive img-rounded" src="images/builtupletters370x280.png"></a>
                   </div>
               </div>
               <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="padding-top: 30px; padding-bottom: 0px;">
                   <div id="what-we-do">
                       <a href="builtupletters.htm"><img class="img-responsive img-rounded" src="images/builtupletters370x280.png"></a>
                   </div>
               </div>
           </div>
           <div class="row">
               <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="padding-top: 30px; padding-bottom: 0px;">
                   <div id="what-we-do">
                       <a href="builtupletters.htm"><img class="img-responsive img-rounded" src="images/builtupletters370x280.png"></a>
                   </div>
               </div>
               <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="padding-top: 30px; padding-bottom: 0px;">
                   <div id="what-we-do">
                       <a href="builtupletters.htm"><img class="img-responsive img-rounded" src="images/builtupletters370x280.png"></a>
                   </div>
               </div>
               <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="padding-top: 30px; padding-bottom: 0px;">
                   <div id="what-we-do">
                       <a href="builtupletters.htm"><img class="img-responsive img-rounded" src="images/builtupletters370x280.png"></a>
                   </div>
               </div>
           </div>
       </div>

}

然而，在xs中，图像像md一样堆叠在另一个上面，但是我不能将它们居中。我试图使用我在md中使用的CSS来实现相同的结果，但它不起作用，因为xs可以是多个宽度，auto和inherit也不起作用。任何人都可以帮助我将这些图像集中在xs列类中。

Answer 1

我认为您需要应用宽度：100％和高度：自动和文本对齐：中心为img的父类

图像不在bootstrap xs列的中心

1 个答案: