如何將列減少到兩個？

Question

我正在嘗試使用這段html/css https://gist.github.com/ezersky/1484d936fd714f83074c作爲行分隔符。然而;當我試圖擺脫一列，並使它與25％/ 75％的分裂一樣時，它會產生干擾並使其下降，並且分隔線消失。另外，如何讓分頻器不會像目前那樣接近頂部，我希望在那裏有一個缺口。

在此先感謝。

Answer 1

下面是代碼筆鏈路：http://codepen.io/saa93/pen/BQNBXB

我所用的相同的代碼您已發佈刪除一列使它成爲COL-SM-3（25％）和col-SM-9（75％ ）行。分頻器仍然適用於屏幕尺寸最小：768像素。

希望這會有所幫助。

HTML：

<div class="container"> 
    <div class="page-header"> 
     <h3>Add the (.grid-divider) class to any row to separate grid columns with equal height lines.</h3> 
    </div> 
    <div class="row grid-divider"> 
    <div class="col-sm-3"> 
     <div class="col-padding"> 
     <h3>Column 1</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima expedita incidunt rerum.</p> 
     </div> 
    </div> 
    <div class="col-sm-9"> 
     <div class="col-padding"> 
     <h3>Column 2</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate placeat suscipit maxime tenetur officiis asperiores quae molestias fugiat praesentium dolorum.</p> 
     </div> 
    </div> 

    </div> 
</div> 

CSS：

/* Tablet and bigger */ 
@media (min-width: 768px) { 
    .grid-divider { 
     position: relative; 

     padding: 0; 
    } 
    .grid-divider>[class*='col-'] { 
     position: static; 
    } 
    .grid-divider>[class*='col-']:nth-child(n+2):before { 
     content: ""; 
     border-left: 1px solid #DDD; 
     position: absolute; 
     top: 0; 
     bottom: 0; 
    } 
    .col-padding { 
     padding: 0 15px; 
    } 
}