Question

我使用面板和cols在bootstrap 3.0上遇到了一些问题。当页面全屏显示时，我希望最后一个面板位于第一个面板的下方，而不是将它放在一个全新的行中，以减少使用它的用户的滚动。我怎样才能做到这一点？

<div class="col-sm-4 col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading">
            <strong>Personal details</strong>
        </div>
    </div>
    <div class="panel-body">
        <div class="form-group">
            <label for="" class="col-sm-4 col-md-4 control-label">
                <strong>Field</strong>
            </label>
            <div class="col-sm-8 col-md-8">
                <div class="well well-sm">
                    Male
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-sm-4 col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading">
            <strong>Personal details</strong>
        </div>
    </div>
    <div class="panel-body">
        <div class="form-group">
            <label for="" class="col-sm-4 col-md-4 control-label">
                <strong>Field</strong>
            </label>

            <div class="col-sm-8 col-md-8">
                <div class="well well-sm">
                    Male
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-sm-4 col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading">
            <strong>Personal details</strong>
        </div>
    </div>
    <div class="panel-body">
        <div class="form-group">
            <label for="" class="col-sm-4 col-md-4 control-label">
                <strong>Field</strong>
            </label>
            <div class="col-sm-8 col-md-8">
                <div class="well well-sm">
                    Male
                </div>
            </div>
            <label for="" class="col-sm-4 col-md-4 control-label">
                <strong>Field</strong>
            </label>
            <div class="col-sm-8 col-md-8">
                <div class="well well-sm">
                    Male
                </div>
            </div>
            <label for="" class="col-sm-4 col-md-4 control-label">
                <strong>Field</strong>
            </label>
            <div class="col-sm-8 col-md-8">
                <div class="well well-sm">
                    Male
                </div>
            </div>
            <label for="" class="col-sm-4 col-md-4 control-label">
                <strong>Field</strong>
            </label>
            <div class="col-sm-8 col-md-8">
                <div class="well well-sm">
                    Male
                </div>
            </div>
            <label for="" class="col-sm-4 col-md-4 control-label">
                <strong>Field</strong>
            </label>
            <div class="col-sm-8 col-md-8">
                <div class="well well-sm">
                    Male
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-sm-4 col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading">
            <strong>Personal details</strong>
        </div>
    </div>
    <div class="panel-body">
        <div class="form-group">
            <label for="" class="col-sm-4 col-md-4 control-label">
                <strong>Field</strong>
            </label>
            <div class="col-sm-8 col-md-8">
                <div class="well well-sm">
                    Male
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Bootstrap的网格为12列，您有16个。将col-sm-4，col-md-4更改为col-sm-3和col-md-3以适合12列。

Answer 2

你是说这个意思吗？ http://jsfiddle.net/39q8yxrv/1/

您只需将两个面板堆叠在同一列中即可。您当前的布局有4列（col-md-4），每列宽度为33％，总宽度超过100％。所以，你的最后一栏被推到了其他专栏之下。但是，如果设置为：

，则第一列将包含两个面板

<div class="col-sm-4">
    <div class="panel">panel 1...</div>
    <div class="panel">panel 2...</div>
</div>

您可能还想在面板上再看一下bootstrap的文档：http://getbootstrap.com/components/#panels。面板标题和正文应位于主面板div内。正如您现在所拥有的那样，您的面板主体位于面板容器之外。如果您使用灰色背景样式的面板标题，您可能需要考虑使用.well类（http://getbootstrap.com/components/#wells）。

另一个观察 -

<div class="col-sm-4 col-md-4"></div>

这是多余的。您只需要使用col-sm-4，它适用于小屏幕及以上。如果您需要在更大的屏幕上更改布局，那么您只需要定义另一个类，例如：

<div class="col-sm-4 col-lg-6"></div>

在超小屏幕上跨越12列，在中小屏幕上跨越4列，在大型及以上屏幕上跨越6列。

为什么最后一个面板在新线上

2 个答案: