Question

有人可以帮我弄清楚我的移动版本的网页会发生什么吗？我正在从getbootstrap.com修改仪表板示例。我想修改其中一个主要行的移动版本，以显示为每行三个div。

              <div class="row placeholders">
                    <div class="col-xs-4 col-sm-2 placeholder">
                        <div class="circleText">3</div>
                        <h4>Active Users</h4>
                        <span class="text-muted">Total Active Users</span>
                    </div>
                    <div class="col-xs-4 col-sm-2 placeholder">
                        <div class="circleText">3</div>
                        <h4>Items</h4>
                        <span class="text-muted">Items in Database</span>
                    </div>
                    <div class="col-xs-4 col-sm-2 placeholder">
                        <div class="circleText">3</div>
                        <h4>Label</h4>
                        <span class="text-muted">Something else</span>
                    </div>
                    <div class="col-xs-4 col-sm-2 placeholder">
                        <div class="circleText">3</div>
                        <h4>Label</h4>
                        <span class="text-muted">Something else</span>
                    </div>
                    <div class="col-xs-4 col-sm-2 placeholder">
                        <div class="circleText">3</div>
                        <h4>Label</h4>
                        <span class="text-muted">Something else</span>
                    </div>
                    <div class="col-xs-4 col-sm-2 placeholder">
                        <div class="circleText">3</div>
                        <h4>Label</h4>
                        <span class="text-muted">Something else</span>
                    </div>
                </div>

模板中的col-xs通常为col-xs-6，共有四列，增加到24个。因此，当您在移动设备上查看时，每行显示两列（自24分成两排12）。奇怪的是，我已将其更改为col-xs-4，共有六列，我想在移动设备上将其显示为两行三列。但是当我在移动设备上查看时，第一行是3，但第二行的第一列被自己推到第三行。为什么会发生这种情况？

Answer 1

这主要是因为其中一个col-sm-4列的高度与其他列不同（较大）。您可以通过在行之间添加clearfix div或确保三列具有相同的大小（高度方式）来解决此问题

我的个人建议是通过javascript来完成。计算所有列的最大高度，并将该高度分配给所有列。但是，如果您只想要一个css解决方案，可以考虑为列设置max-height

Bootstrap col-xs- *无法正常工作

1 个答案: