Flexbox縮略圖網格在移動設備上顯示爲2列

Question

我有以下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列。 下面是截圖它的外觀現在：

我怎樣才能改變我的頁面，如果在智能手機/平板顯示，它僅顯示1列？

Answer 1

您正在使用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>

Answer 2

另一種選擇是切換列斷點這樣的..

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

這樣，你仍然可以在小2列，和1列xs。

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