小屏幕中的响应式设计问题 - Bootstrap

Question

我有水平显示的卡片。请看图片以获得一个想法。当我有一个大标题时，在sm屏幕中，列内的卡片不均匀地包裹。

<div class="col-sm-4" data-ng-repeat="card in cards">
     <div class="card">
       <div class="cardHeader">Big Header issue</div>
        .....
     </div>
</div>

如何解决这个问题？

Answer 1

选项1

你可以使用这样的CSS省略号在标题太长时将'..'附加到标题：

.cardHeader {
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow: hidden;
}

演示：http://www.bootply.com/115420（使用panel-heading代替）

选项2

另一种选择是在每3'col-sm-4'div之后使用clearfix div。

演示：http://www.bootply.com/115421

---

相关
Bootstrap row with columns of different height

Answer 2

你使用行类吗？像这样的东西：

<div class ='row'>
    <div class="col-sm-4">
     <div class="card">
       <div class="cardHeader">Big Header issue</div>
        .....
     </div>
   </div>

   <div class="col-sm-4">
     <div class="card">
       <div class="cardHeader">Big Header issue</div>
        .....
     </div>
   </div>

   <div class="col-sm-4">
     <div class="card">
       <div class="cardHeader">Big Header issue</div>
        .....
     </div>
   </div>
</div>

Answer 3

另一种选择，它稍微多了一些HTML，但保持盒子/卡响应：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4">
                    <div class="card biggercard">
                       <div class="cardHeader">Biggest Header</div>
                        1
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                       <div class="cardHeader">Second Header</div>
                        2
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                       <div class="cardHeader">Third</div>
                        3
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                       <div class="cardHeader">Fourth</div>
                        4
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                       <div class="cardHeader">5th</div>
                        5
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                       <div class="cardHeader">6th</div>
                         6
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Demo FIddle：http://jsfiddle.net/La3H2/