Flexbox Thumbnail Grid在Mobile上显示为2列

时间：2017-03-07 14:35:52

标签： html css twitter-bootstrap-3 flexbox

我有以下HTML页面在我的网站上显示缩略图网格。每列都有相同的高度。

<div class="container">
<div class="flex-row row">
    <div class="col-xs-6 col-sm-4 col-lg-3">
        <div class="thumbnail">
            <div class="caption">
                <h3>Title</h3>
                <p class="flex-text text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    asdfasdfasdfsdfa asdfasdf sdfasfasdfasfasdfasdfasdfsd asdf asdf Distinctio, evenietsdf
                    sdfsdfsdfsdfsdfsdf.
                </p>
                <p><a rel="nofollow" rel="noreferrer" class="btn btn-primary" href="#">Link</a></p>
            </div>
            <!-- /.caption -->
        </div>
        <!-- /.thumbnail -->
    </div>


    <div class="col-xs-6 col-sm-4 col-lg-3">
        <div class="thumbnail ">
            <div class="caption">
                <h3>Title</h3>
                <p class="flex-text text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore,
                    vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel
                    blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
                <p>
                    <a rel="nofollow" rel="noreferrer" class="btn btn-primary" href="#">Link</a>
                </p>
            </div>
            <!-- /.caption -->
        </div>
        <!-- /.thumbnail -->
    </div>


    <div class="col-xs-6 col-sm-4 col-lg-3">
        <div class="thumbnail">
            <div class="caption">
                <h3>Title</h3>
                <p class="flex-text text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore,
                    vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
                <p>
                    <a rel="nofollow" rel="noreferrer" class="btn btn-primary" href="#">Link</a>
                </p>
            </div>
            <!-- /.caption -->
        </div>
        <!-- /.thumbnail -->
    </div>


    <div class="col-xs-6 col-sm-4 col-lg-3">
        <div class="thumbnail">
            <div class="caption">
                <h3>Title</h3>
                <p class="flex-text text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Consequatur optio ipsa fuga vel repudiandae impedit illum delectus nihil error animi nobis
                    quaerat quidem, amet, praesentium aspernatur inventore numquam! Totam, dolorem inventore
                    reprehenderit,
                    culpa obcaecati!</p>
                <p><a rel="nofollow" rel="noreferrer" class="btn btn-primary" href="#">Link</a></p>
            </div>
            <!-- /.caption -->
        </div>
        <!-- /.thumbnail -->
    </div>


    <div class="col-xs-6 col-sm-4 col-lg-3">
        <div class="thumbnail">
            <div class="caption">
                <h3>Title</h3>
                <p class="flex-text text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo veniam
                    tempore vero velit deleniti corporis recusandae placeat eum repellendus modi architecto, iste,
                    numquam nulla, praesentium fuga soluta eos consequatur sequi expedita! Ea aspernatur
                    explicabo optio ducimus officia blanditiis voluptas possimus veniam maxime!</p>
                <p>
                    <a rel="nofollow" rel="noreferrer" class="btn btn-primary" href="#">Link</a>
                </p>
            </div>
            <!-- /.caption -->
        </div>
        <!-- /.thumbnail -->
    </div>


    <div class="col-xs-6 col-sm-4 col-lg-3">
        <div class="thumbnail">
            <div class="caption">
                <h3>Title</h3>
                <p class="flex-text text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo veniam
                    tempore vero velit deleniti corporis recusandae placeat eum repellendus modi architecto, iste,
                    numquam nulla, praesentium fuga soluta eos consequatur sequi expedita! Ea aspernatur
                    explicabo!
                </p>
                <p>
                    <a rel="nofollow" rel="noreferrer" class="btn btn-primary" href="#">Link</a>
                </p>
            </div>
            <!-- /.caption -->
        </div>
        <!-- /.thumbnail -->
    </div>
</div><!-- /. row -->
</div><!-- /.container -->

使用以下style.css文件。

@media only screen and (min-width : 481px) {
    .flex-row.row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .flex-row.row > [class*='col-'] {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .flex-row.row:after,
    .flex-row.row:before {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .flex-row.row > [class*='col-'] > .box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
}
/* Grow thumbnails to fill columns height */
.flex-row .thumbnail,
.flex-row .caption {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

 /* Flex Grow Text Container */
 .flex-row .caption p.flex-text {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

如果我在浏览器中显示它并将视图更改为智能手机大小，则会显示带有2列的网格。但我希望它只显示1列。 以下是截图： enter image description here

如何更改我的页面，如果在智能手机/平板电脑上显示，它只显示1列？

2 个答案:

答案 0 :(得分：0)

您正在使用class=col-xs-6这就是显示两列的原因。使用class=col-xs-12这可以解决您的问题。

工作代码 

<!DOCTYPE html>
<html>


<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           </head>
<body >
  

      
<div class="container">
<div class="flex-row row">
    <div class="col-xs-12 col-sm-4 col-lg-3">
        <div class="thumbnail">
            <div class="caption">
                <h3>Title</h3>
                <p class="flex-text text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    asdfasdfasdfsdfa asdfasdf sdfasfasdfasfasdfasdfasdfsd asdf asdf Distinctio, evenietsdf
                    sdfsdfsdfsdfsdfsdf.
                </p>
                <p><a rel="nofollow" rel="noreferrer" class="btn btn-primary" href="#">Link</a></p>
            </div>
            <!-- /.caption -->
        </div>
        <!-- /.thumbnail -->
    </div>


    <div class="col-xs-12 col-sm-4 col-lg-3">
        <div class="thumbnail ">
            <div class="caption">
                <h3>Title</h3>
                <p class="flex-text text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore,
                    vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel
                    blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
                <p>
                    <a rel="nofollow" rel="noreferrer" class="btn btn-primary" href="#">Link</a>
                </p>
            </div>
            <!-- /.caption -->
        </div>
        <!-- /.thumbnail -->
    </div>


    <div class="col-xs-12 col-sm-4 col-lg-3">
        <div class="thumbnail">
            <div class="caption">
                <h3>Title</h3>
                <p class="flex-text text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore,
                    vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
                <p>
                    <a rel="nofollow" rel="noreferrer" class="btn btn-primary" href="#">Link</a>
                </p>
            </div>
            <!-- /.caption -->
        </div>
        <!-- /.thumbnail -->
    </div>


    <div class="col-xs-12 col-sm-4 col-lg-3">
        <div class="thumbnail">
            <div class="caption">
                <h3>Title</h3>
                <p class="flex-text text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Consequatur optio ipsa fuga vel repudiandae impedit illum delectus nihil error animi nobis
                    quaerat quidem, amet, praesentium aspernatur inventore numquam! Totam, dolorem inventore
                    reprehenderit,
                    culpa obcaecati!</p>
                <p><a rel="nofollow" rel="noreferrer" class="btn btn-primary" href="#">Link</a></p>
            </div>
            <!-- /.caption -->
        </div>
        <!-- /.thumbnail -->
    </div>


    <div class="col-xs-12 col-sm-4 col-lg-3">
        <div class="thumbnail">
            <div class="caption">
                <h3>Title</h3>
                <p class="flex-text text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo veniam
                    tempore vero velit deleniti corporis recusandae placeat eum repellendus modi architecto, iste,
                    numquam nulla, praesentium fuga soluta eos consequatur sequi expedita! Ea aspernatur
                    explicabo optio ducimus officia blanditiis voluptas possimus veniam maxime!</p>
                <p>
                    <a rel="nofollow" rel="noreferrer" class="btn btn-primary" href="#">Link</a>
                </p>
            </div>
            <!-- /.caption -->
        </div>
        <!-- /.thumbnail -->
    </div>


    <div class="col-xs-12 col-sm-4 col-lg-3">
        <div class="thumbnail">
            <div class="caption">
                <h3>Title</h3>
                <p class="flex-text text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo veniam
                    tempore vero velit deleniti corporis recusandae placeat eum repellendus modi architecto, iste,
                    numquam nulla, praesentium fuga soluta eos consequatur sequi expedita! Ea aspernatur
                    explicabo!
                </p>
                <p>
                    <a rel="nofollow" rel="noreferrer" class="btn btn-primary" href="#">Link</a>
                </p>
            </div>
            <!-- /.caption -->
        </div>
        <!-- /.thumbnail -->
    </div>
</div><!-- /. row -->
</div><!-- /.container -->
</body>

</html>

答案 1 :(得分：0)

另一种选择是像这样切换列断点。

<div class="col-sm-6 col-md-4 col-lg-3">..</div>

通过这种方式，您仍会在xs上的小列和1列上获得2列。

http://www.codeply.com/go/VSuGAhBCWj

相关问题
最新问题