html - BootStrap 中的响应式设计使用什么列系统

Question

我是一个完全的初学者，我正在学习 Bootstrap。我想知道如何确定我的网站需要使用哪个栏目系统。假设我有一行 3 列。现在我有 3 个选择。

选项 1:

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

选项 2:

<div class="row">
    <div class="col-lg-4">
    </div>
    <div class="col-lg-4">
    </div>
    <div class="col-lg-4">
    </div>
</div>

选项 3:

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

现在我的问题是，因为我希望我的网站能够响应我需要申请的类别。无论选择何种设备，我都希望我的网站能够正确呈现。我知道它们适用于不同的设备。这是否意味着，我需要编写 3 个不同的 css 样式 代码(我对此表示怀疑)。那么，我应该在我的代码中放些什么？

P.S:我看到了这个链接 SO LINK我明白了。但我仍然很困惑，我的代码中应该放些什么？我应该放 sm、lg 还是 md？

Answer 1

这些定义布局折叠时的屏幕宽度。例如在.col-md-中，布局会一直水平，直到屏幕宽度小于970px，此时布局会塌陷。但是，如果使用.col-lg-，布局会一直水平，直到屏幕宽度小于1170px，然后就会塌陷。

Bootstrap 有 4 个断点，.col-xs-、.col-sm-、.col-md- 和 .col-lg-。您应该根据 div 的内容使用这些。熟悉的最好方法是尝试每一个，并注意当您减小窗口宽度时，布局会在每个不同的点折叠。因此，要回答这个问题，您应该为您的 div 内容选择正确折叠的那个。希望这会有所帮助。

有关 Bootstrap 网格系统的更详细指南，请查看:https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp 我发现这有助于更好地理解。