如何將列從三個減少到兩個而不移動到下面 - bootstrap

Question

我正在嘗試使用這段html/css http://bootsnipp.com/snippets/featured/grid-columns-divider作爲行分隔符。然而;當我試圖擺脫一列，並使其與25％/ 75％分裂的2列一樣時，它會出現毛刺並使其下降，並且分隔線消失。另外，如何讓分頻器不會像目前那樣接近頂部，我希望在那裏有一個缺口。

/* 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; 
 
    } 
 
}

<script 
 
    src="https://code.jquery.com/jquery-3.1.1.min.js" 
 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
 
    crossorigin="anonymous"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<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-4"> 
 
     <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-4"> 
 
     <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 class="col-sm-4"> 
 
     <div class="col-padding"> 
 
     <h3>Column 3</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veniam aperiam numquam cupiditate maiores repudiandae ea dicta, sunt rerum corporis. Ab veniam aperiam numquam cupiditate maiores repudiandae ea dicta, sunt rerum corporis. Ab veniam aperiam numquam cupiditate maiores repudiandae ea dicta.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 1

你可以看一下下面的修改snippet。

我已經添加了一個類.pb-15給你的要求，頂部分頻器的差距。

/* 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; 
 
    } 
 
} 
 

 
.pb-15 { 
 
    padding-bottom: 15px!important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="page-header pb-15"> 
 
     <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>