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

Question

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

<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 更改为 column-6 等，但无论我将其更改为什么，这就是我在移动设备尺寸下获得的列数。我被告知我可以将代码用作 col-sm-1 col-lg-4 之类的代码，这确实为我提供了移动尺寸的单列，但是，它也为我提供了完整浏览器尺寸的单列。

我已经尝试了所有组合，但就是行不通。谁能给我指出正确的方向，你需要看我的 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 需要有 "row" 的 class，然后将您的列 classes 添加到每个 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 网格组合的问题

Problems with Bootstrap grid portfolio on mobile device

twitter-bootstrap

bootstrap-image-gallery