如何将列从三个减少到两个而不移动到下面 - 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>