Question

我在设置所有col-sm-3的高度时遇到问题，我尝试了row-eq-height类，但它将所有列设置为一行

我的代码是

`

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

设置bootstrap中所有col-sm-equal的高度

1 个答案: