如何解決引導網格問題在移動設備上？

Question

Im編輯Ebay列表上的描述在哪裏不允許腳本。 ebay描述嵌入在eBay模板中。

我發現我的＃產品組合在mobile上顯示不正確！

在desktop它絕對好，因爲它們是col-lg-3。在移動設備上使用col-xs-6，因爲我想要一個2 x 2的網格。 問題是最後一列被拖入另一行。 查看上面的移動圖像，顯示我的問題。

任何人都可以教我一個新的CSS技巧，阻止最後一列被吸進一個新的行？

<div id="portfolio" class="container-fluid text-center "> 
    <h2><font color="#ce2065">the shills black mask</font><br><font size="1">&nbsp;</font></h2> 
    <div class="row"> 
     <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint1.jpg" class="img-responsive img-thumbnail img-circle margin" alt="Image" style="text-align: center; width: 60%;"> 
      <p style="text-align: center;"><span style="line-height: 1.8;">The latest trend in skincare.&nbsp;</span>Proven results with the word’s best selling black mask - loved by beauty bloggers, as seen on YouTube</p> 
     </div> 
     <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint2.jpg" class="img-responsive img-thumbnail img-circle margin" alt="Image" style="text-align: center; width: 60%;"> 
      <p><span style="line-height: 1.8;">Activated charcoal quickly and effectively pulls blackheads from the root and aids skin regeneration. Promotes healthy skin too!</span></p> 
     </div> 
     <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint3.jpg" class="img-responsive img-thumbnail img-circle margin" style="text-align: center; width: 60%;"> 
      <p><span style="line-height: 1.8;">Brightening naturally-derived ingredients calendula, rosemary and grapefruit help restore a plump, youthful complexion.</span></p> 
     </div> 
     <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint2.jpg" class="img-responsive img-thumbnail img-circle margin" style="text-align: center; width: 60%;" alt="Image"> 
      <p><span style="line-height: 1.8;">Deeply penetrates the pores to remove acne-causing oil, which is also the main cause of acne outbreaks. Three more words.</span></p> 
      <p> 
       <br> 
      </p> 
     </div> 
    </div> 
</div> 

CSS：

/*Portfolio items*/ 


    #portfolio .portfolio-item { 
     margin: 0 0 15px; 
     right: 0; 
     border: 1px outset rgba(255, 255, 255, 0.6); 
    } 

    #portfolio .portfolio-item:hover { 
     transition: 0.5s; 
     box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.9); 
    } 

    #portfolio .portfolio-item .portfolio-link { 
     display: block; 
     position: relative; 
     max-width: 400px; 
     margin: 0 auto; 
    } 

    #portfolio .portfolio-item .portfolio-link .portfolio-hover { 
     background: rgba(0, 0, 0, .7); 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     opacity: 0; 
     transition: all ease .5s; 
     -webkit-transition: all ease .5s; 
     -moz-transition: all ease .5s, 
    } 

    #portfolio .portfolio-item .portfolio-link .portfolio-hover:hover { 
     opacity: 1; 
    } 

    #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content { 
     position: absolute; 
     width: 100%; 
     height: 20px; 
     font-size: 20px; 
     text-align: center; 
     top: 50%; 
     margin-top: -12px; 
     color: #fff; 
    } 

    #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i { 
     margin-top: -12px; 
    } 

    #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3, 
    #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 { 
     margin: 0; 
    } 

    #portfolio .portfolio-item .portfolio-caption { 
     max-width: 400px; 
     margin: 0 auto; 
     background-color: rgba(0, 0, 0, 0.8); 
     text-align: center; 
     padding: 25px; 
    } 

    #portfolio .portfolio-item .portfolio-caption h4 { 
     color: #fff; 
     text-transform: none; 
     margin: 0; 
    } 

    #portfolio .portfolio-item .portfolio-caption p { 
     font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif; 
     font-style: italic; 
     font-size: 13px; 
     margin: 0; 
    } 

    #portfolio * { 
     z-index: 2; 
    } 

    @media (min-width:767px) { 
     #portfolio .portfolio-item { 
      margin: 0 0 30px; 
     } 
    } 

Answer 1

爲了防止物體跳到你需要使用clearfix至極僅用於XS視口中不可見。 它看起來像：

<div class="clearfix visible-xs-block"></div> 

因此，這裏是一個結果代碼：

<div id="portfolio" class="container-fluid text-center "> 
    <h2><font color="#ce2065">the shills black mask</font><br><font size="1">&nbsp;</font></h2> 
    <div class="row"> 
     <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint1.jpg" class="img-responsive img-thumbnail img-circle margin" alt="Image" style="text-align: center; width: 60%;"> 
      <p style="text-align: center;"><span style="line-height: 1.8;">The latest trend in skincare.&nbsp;</span>Proven results with the word’s best selling black mask - loved by beauty bloggers, as seen on YouTube</p> 
     </div> 
     <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint2.jpg" class="img-responsive img-thumbnail img-circle margin" alt="Image" style="text-align: center; width: 60%;"> 
      <p><span style="line-height: 1.8;">Activated charcoal quickly and effectively pulls blackheads from the root and aids skin regeneration. Promotes healthy skin too!</span></p> 
     </div> 
     <div class="clearfix visible-xs-block"></div> 
     <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint3.jpg" class="img-responsive img-thumbnail img-circle margin" style="text-align: center; width: 60%;"> 
      <p><span style="line-height: 1.8;">Brightening naturally-derived ingredients calendula, rosemary and grapefruit help restore a plump, youthful complexion.</span></p> 
     </div> 
     <div class="col-sm-3 col-xs-6"> <img src="http://justbeauty-uk.s3.amazonaws.com/shillspoint2.jpg" class="img-responsive img-thumbnail img-circle margin" style="text-align: center; width: 60%;" alt="Image"> 
      <p><span style="line-height: 1.8;">Deeply penetrates the pores to remove acne-causing oil, which is also the main cause of acne outbreaks. Three more words.</span></p> 
      <p> 
       <br> 
      </p> 
     </div> 
    </div> 
</div>