BootStrap系统在响应设计中的应用
我是一个完全的初学者，我正在学习靴带。我想知道如何确定我需要在我的网站上使用哪个列系统。假设我有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 style代码(我对此表示怀疑)。那么，我应该把什么写在我的代码里呢？
P.S:我看到了所以链接的这个链接，我明白了。但我还是很困惑，在我的代码里放了什么？我要放sm，lg还是md？
回答 3
Stack Overflow用户
发布于 2017-09-17 00:19:33
这些定义了布局将要折叠的屏幕的宽度。例如，在.col-md-中，布局将是水平的，直到屏幕宽度小于970 at，此时布局将折叠。但是，如果使用.col-lg-，布局将是水平的，直到屏幕宽度小于1170 is时，它才会折叠。
引导程序有4个断点，.col-xs-、.col-sm-、.col-md-和.col-lg-。您应该根据div的内容使用这些内容。变得熟悉的最好方法是与每个人一起玩，并且注意到当你缩小窗口的宽度时，布局会在每个点上崩溃。因此，要回答这个问题，您应该为您的div的内容选择正确的哪一个。希望这能有所帮助。
有关引导网格系统的更详细的指南，请看下面的内容：system.asp --我发现它有助于得到一个很好的理解。
Stack Overflow用户
发布于 2017-09-17 00:31:47
我通常使用col-md前缀，所以我想您的第一个选择会很好：col-md-4。
Stack Overflow用户
发布于 2017-09-17 11:04:15
要添加已收到的其他建议，请记住，可以将多个引导列类应用到同一个div。
例如，假设您希望在一个宽视图中有3个等宽的列。然后，当视口缩小到一个全宽标题，下面有两个等宽列时，在智能手机上，所有三个div都垂直堆叠，然后您可能会使用以下内容
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">column1
</div>
<div class="col-lg-4 col-md-6">colmun2
</div>
<div class="col-lg-4 col-md-6">column3
</div>
</div>
</div> 查看这个活动的https://codepen.io/panchroma/pen/EwVwpw
或者，您可能希望在不同的视图中更改3列的相对宽度。
<div class="row">
<div class="col-lg-6 col-md-4">
</div>
<div class="col-lg-3 col-md-4">
</div>
<div class="col-lg-3 col-md-4">
</div>
</div>或者，您可能希望在较窄的视图中隐藏其中一列。
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4 hidden-sm hidden-xs">
</div>
</div>重要的是，您可以混合和匹配您的类，以实现您需要的响应行为。
一旦您掌握了网格大小选项的诀窍，您可能还想了解如何使用重新排序列。经常发生的情况是，您需要在桌面和移动设备上有不同的列顺序，而且可能也会有一些时候您想要偏移柱。
祝好运!
https://stackoverflow.com/questions/46259501
复制相似问题
腾讯云开发者
