Question

如何在小屏幕和大屏幕上设置显示相同的页面？在大屏幕上，一切都很完美，但如果我在较小的屏幕上移动页面，那么事情就会开始变得混乱。以下代码:(使用bootstrap和css制作）

<div class="list-group">
            <ul class="panel-info col-lg-12 list">
                <li class="list-group-item list__item col-lg-4" ng-repeat="entity in entitiesPaginated">
                </li>
            </ul>
</div>

我不会在这里写下所有代码，因为我认为最重要的部分是引导部分，我应该对其进行哪些更改，以便无论屏幕显示哪个显示都相同？谢谢

Answer 1

仅使用最小断点的网格类...

<div class="list-group">
            <ul class="panel-info col-12 list">
                <li class="list-group-item list__item col-4">
                </li>
            </ul>
</div>

来自Bootstrap 4 docs ...

对于从最小设备到最大的相同的网格，请使用.col和.col- *类。

请注意，在Bootstrap 4 Beta中，不再使用-xs-中缀，因为xs是默认断点。它只是col-12而不是col-xs-12。

Answer 2

也为其他视口设置col类：col-md-，col-sm-，col-xs- *

这是一个例子：

<div class="list-group">
            <ul class="panel-info col-lg-12 col-md-12 col-sm-12 col-xs-12 list">
                <li class="list-group-item list__item col-lg-4 col-md-4 col-sm-4 col-xs-4" ng-repeat="entity in entitiesPaginated">
                </li>
            </ul>
</div>

您应该阅读有关Bootstrap网格系统的信息

无论屏幕尺寸引导，都希望显示页面相同

2 个答案: