Question

我需要制作一个全屏显示6列的网格，在较小/移动设备上可以缩小到2列。这是我到目前为止所尝试的。它在我的笔记本电脑上看起来很宽，但是当它更小，iPhone或平板电脑时，它显示6列仍然有非常小的图像。

＆＃13;

<div class="row mb-3">
<div class="col filter bunarske">
               <img class="img-fluid" alt="" src="references/logos/hardrock4.gif" /> </div>
                
<div class="col filter bunarske">
                     <img class="img-fluid" alt="Paragon Casino Resort" src="references/logos/paragon.jpg"> </div>
                 
<div class="col filter bunarske">
                <img class="img-fluid" alt="Tuscon Center" src="references/logos/USHomeLogo.jpg">  </div>
                
<div class="col filter bunarske">
               <img class="img-fluid" alt="Choctaw Casino" src="references/logos/choctaw.jpg">  </div>
                
<div class="col filter bunarske">
                  <img class="img-fluid" alt="Trump 29 Casino" src="references/logos/trump29.jpg">  </div>
                 
<div class="col filter bunarske">
                 <img class="img-fluid" alt="Kimberly Clark" src="references/logos/KimberlyClarkLogo.jpg"> </div>
            </div>                 
<div class="clearfix"></div>

＆＃13;

http://pscompetitiveedge.com/references-test.html

Answer 1

将col-xs-2更改为col-xs-6。

你必须总计12个，每个＆＃34;总和＆＃34; colums to 12被放入一行 - 这就是它的工作原理。

Answer 2

使用此代码

＆＃13;

<div class="row flex-mb1">
<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>

<div class="col-xs-6  col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>

<div class="col-xs-6  col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>

<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>
                                                                                                    
  <div class="col-xs-6  col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>                                                                                                  
                                                                                                    <div class="col-xs-6  col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>
</div>
<!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix d-none d-sm-block"></div>

＆＃13;

如果想要在额外的小屏幕上保留2列，你可以将col-xs-12更改为col-xs-6

Bootstrap 4 beta grid 6 columns＆gt;调整大小

2 个答案: