Question

我有类似以下的内容

<div class=content-fluid>
    <div class=page-header>
        <div class=row>
            <div class="pull-left col-md-3">
                ...
            </div>
            <div class="pull-right col-md-3">
                <div class="row">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

我想要的是右列始终保持其大小，而不是进入“小模式”，其中每列成为全宽行，并且当窗口太小时，右列滑动在左栏下面。实现这一目标非常复杂！

感谢您的帮助。

Answer 1

除col-sm-3课程外，您还必须实施自助col-xs-3和col-md-3课程。您可以在官方bootstrap网站上查看他们的网格文档。

因此...... <div class="col-xs-3">

根据视口大小，您还可以将它们用于不同的宽度，例如：<div class="col-md-3 col-sm-4 col-xs-6">

Answer 2

应该以这种方式起诉bootstrap网格

<div class=content-fluid>
        <div class=page-header>
            <div class=row>
                <div class="pull-left col-md-3 col-sm-12 col-xs-12">
                    ...
                </div>
                <div class="pull-right col-md-3 col-xs-3 col-sm-3 col-lg-3">
                    <div class="row">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>

使用col-3表示自举网格的所有“大小”，使用12表示左侧的小尺寸

Bootstrap：左边和右边三行的行？

2 个答案: