html - 在我的 Razor View 中使用 col-sm 和 col-xs

Question

我正在使用的 Web 模板中包含以下代码:-

</div>
<div class="row panel">
<div class="col-sm-3 hidden-xs">
@Html.Action("Menu", "Nav")
</div>
<div class="col-xs-12 col-sm-8">
@RenderBody()
</div>
</div>

但现在我对这两个 div 如何在全屏(大屏幕)中显示感到困惑，因为我理解标记如下:-

• Menu 会在 X 小屏幕上隐藏，在小屏幕上占据 3 列，但是在大屏幕上呢？

• RenderBoy 将在 x 小屏幕中占据 12 个，在小屏幕中占据 8 个，但是大屏幕呢？

谁能给个建议？

谢谢

Answer 1

bootstrap 的网格系统基于 min-width 属性工作。这意味着例如 col-sm-8 是这样的:

.col-sm-8 {
  width: 100%;
}
@media (min-width: 768px) {
  .col-sm-8 {
    width: 66.66666667%;
  }
}

因此，当您使用 class="col-sm-8" 装饰 html 元素时，会发生以下情况:

• 默认宽度为 100%(屏幕宽度小于 768 像素的小型设备)
• 当您在最小宽度为 768 像素的屏幕中时，将应用第二条规则。所以该元素的宽度为 66.66666667%。这部分意味着，当您在 md 设备(宽度为 992px)或 lg 设备(宽度为 1200px)中时，如果该元素没有这些设备的另一个 css 规则，它将使用 .col- 的值sm-8 为元素提供了(因为 992 和 1200 都大于 768。不是吗？我们为 min-width 768 订购了 css。所以大于该值的所有内容都可以使用该规则) .

我的英语太差了，所以如果我不能解释清楚，请告诉我。