无论屏幕大小如何，都希望显示页面相同答案

【问题标题】：Want display page the same no matter the screen size bootstrap无论屏幕大小如何，都希望显示页面相同
【发布时间】：2018-02-05 10:07:12
【问题描述】：

如何在小屏幕和大屏幕上显示相同的页面样式？在大屏幕上一切都很完美，但如果我在小屏幕上移动页面，事情就会开始混乱。以下代码：（它是用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>

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

【问题讨论】：

为其他视口设置 col 类：col-md-,col-sm-,col-xs-*
怎么做？例如，我假设类 col-lg-12 来自引导程序。那么在哪里编辑呢？在默认引导文件中？
如果你使用的是bootstrap，那么请先阅读文档，这里我们不能让你学习如何使用bootstrap。首先尝试阅读文档如何使用引导程序的网格系统，然后您就会得到答案。

标签： css bootstrap-4

【解决方案1】：

也为其他视口设置 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 网格系统的信息

【讨论】：

col-lg-12 col-md-12 col-sm-12 col-xs-12 不是必需的，与col-xs-12 相同。你应该阅读grid system

【解决方案2】：

只对最小的断点使用网格类...

<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。

【讨论】：