Question

我试图让我的Bootstrap投资组合图片库以全尺寸显示4张图片，在平板电脑尺寸下显示4张图片，在手机尺寸上显示1张图片。我已经为此工作了两天（是的，我是新手），我无法解决问题。该画廊最初使用过滤器（Bootstrap，Wordpress，HTML等），但我删除它们以便在移动设备上获得一个堆叠的图库。据我所知，答案是在以下代码的UL类中：

<section id="portfolio" class="container">
    <ul class="portfolio-items col-4">
        <li class="portfolio-item">
            <div class="item-inner">
                <img src="images/portfolio/thumb/item1.jpg" alt="">
                <h5>Coble & Associates</h5>
                <div class="overlay">
                <a class="preview btn btn-danger" href="http://www.cobleandassociates.com/" target="_blank"prettyPhoto"><i class="icon-link"></i></a>             
                    <a class="preview btn btn-danger" href="images/portfolio/full/item1.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>             
                </div>

我可以根据需要将图库设置为任意多列，只需将col-4更改为第6列等，但无论我将其更改为什么，这都是我在移动设备上获得的列数。有人告诉我，我可以像col-sm-1 col-lg-4一样使用代码，这确实给了我一个移动大小的列，但是，它也给了我一个完整浏览器大小的列。 / p>

我已尝试过各种组合，但它只是不起作用。任何人都可以指出我正确的方向，你需要看到我的CSS文件吗？您可以在http://www.prodesignnc.com/portfolio.html查看我的实际网站上的源代码，我们将非常感谢您提供的任何帮助。谢谢。大卫

Edit

<section id="portfolio" class="container">
    <ul class="portfolio-items row">
 <li class="portfolio-item col-lg-4 col-md-6 col-sm-12">
         <div class="item-inner">

                <img src="images/portfolio/thumb/item1.jpg" alt="">
                <h5>Coble & Associates</h5>
                <div class="overlay">
                <a class="preview btn btn-danger" href="http://www.cobleandassociates.com/" target="_blank"prettyPhoto"><i class="icon-link"></i></a>             
                    <a class="preview btn btn-danger" href="images/portfolio/full/item1.jpg"  rel="prettyPhoto"><i class="icon-eye-open"></i></a>             
                </div>           
          </div>           
        </li><!--/.portfolio-item-->
        <li class="portfolio-item">
            <div class="item-inner">
                <img src="images/portfolio/thumb/item2.jpg" alt="">
                <h5>Herring & Mills</h5>
                <div class="overlay">
                    <a class="preview btn btn-danger" href="images/portfolio/full/item2.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>              
                </div>           
            </div>           
        </li><!--/.portfolio-item-->
        <li class="portfolio-item">
            <div class="item-inner">
                <img src="images/portfolio/thumb/item3.jpg" alt="">
                <h5>YCL Project</h5>
                <div class="overlay">
                    <a class="preview btn btn-danger" href="images/portfolio/full/item3.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>        
                </div>           
            </div>           
        </li><!--/.portfolio-item-->
        <li class="portfolio-item">
            <div class="item-inner">
                <img src="images/portfolio/thumb/item8.jpg" alt="">
                <h5>National Coaches Day</h5>
                <div class="overlay">
                    <a class="preview btn btn-danger" href="images/portfolio/full/item8.jpg" rel="prettyPhoto"><i class="icon-eye-open"></i></a>          
                </div>           
            </div>           
        </li><!--/.portfolio-item-->

Answer 1

我相信你的ul需要有一个＆＃34; row＆＃34;然后将列类添加到每个li。尝试这样的事情：

<ul class="portfolio-items row">
     <li class="portfolio-item col-lg-4 col-md-6 col-sm-12">

col-lg-4适用于大型显示器上的3列， col-md-6适用于中型显示器上的2列 col-sm-12用于小型显示器上的1列

Answer 2

每个portfolio item应该是col-*，portfolio-items应该是一行..

演示： http://www.bootply.com/render/IuF5rpPzOy

代码： http://www.bootply.com/IuF5rpPzOy

移动设备上Bootstrap网格组合的问题

2 个答案: