所有COL-SM-在引導

Question

我在設置所有COL-SM-3的高度面臨的一個問題平等的，我試過行EQ高類的設置高度，但其設置的所有列到一行

我的代碼是

`

<div class="jumbotron"> 
     <div class="row clearfix"> 
     <div class="col-sm-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
     <div class="col-sm-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text I am a text I am a text I am a text</p></div> 
     <div class="col-sm-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
     <div class="col-sm-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
     <div class="col-sm-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"><p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
     <div class="col-sm-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"><p style="font-size:20px; text-align:center">I am a text I am a text I am a text I am a text I am a text I am a text</p></div> 
     <div class="col-sm-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text I am a text I am a text I am a text</p></div> 
     <div class="col-sm-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
     <div class="col-sm-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
     <div class="col-sm-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
     <div class="col-sm-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
     <div class="col-sm-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 

     </div> 
     </div> 

輸出我越來越像

Output screenshot

我想在一些COL-SM-3

Answer 1

使用去除造成由於這些空格將較長的文本這個CSS這可能幫助你..

.row { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.row > [class*='col-'] { 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
<div class="jumbotron"> 
 
     <div class="row clearfix"> 
 
     <div class="col-sm-3 col-xs-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
 
     <div class="col-sm-3 col-xs-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text I am a text I am a text I am a text</p></div> 
 
     <div class="col-sm-3 col-xs-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
 
     <div class="col-sm-3 col-xs-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
 
     <div class="col-sm-3 col-xs-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"><p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
 
     <div class="col-sm-3 col-xs-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"><p style="font-size:20px; text-align:center">I am a text I am a text I am a text I am a text I am a text I am a text</p></div> 
 
     <div class="col-sm-3 col-xs-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text I am a text I am a text I am a text</p></div> 
 
     <div class="col-sm-3 col-xs-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
 
     <div class="col-sm-3 col-xs-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
 
     <div class="col-sm-3 col-xs-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
 
     <div class="col-sm-3 col-xs-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
 
     <div class="col-sm-3 col-xs-3" style="margin-bottom:20px;"><img src="ch4.jpg" class="img-responsive center-block"> <p style="font-size:20px; text-align:center">I am a text I am a text I am a text</p></div> 
 

 
     </div> 
 
     </div> 
 
    </div>