列を3つから2つに減らす方法 - ブートストラップ

Question

このhtml/cssをラインデバイダに使用しようとしています。しかしながら;私が1つの列を取り除こうとすると、25％/ 75％の分割で2列になっているとグリッチして、その下に移動し、行分割線が消えます。また、ラインディバイダを現在のようにトップに近づけないようにするにはどうすればいいですか？あなたは以下の修正snippetで見ることができ

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

。

私はクラス.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>