Question

我在使用的网页模板中有以下代码： -

</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在全屏（大屏幕）中的显示方式感到困惑，因为我理解标记如下： -

菜单将隐藏在X小屏幕上，占用3个小尺寸的列，但大屏幕呢？
RenderBoy将占用12个x小屏幕和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％（屏幕宽度低于768px的小型设备）
当您处于最小宽度为768像素的屏幕时，将应用第二条规则。所以元素的宽度为66.66666667％。这部分意味着，当你在md设备（992px的宽度）或lg设备（1200px宽度）时，如果该元素没有这些设备的另一个css规则，它将使用.col-sm-8具有的值为元素提供（因为992和1200都大于768.不是吗？我们命令css的最小宽度为768.所以大于此的一切都可以使用该规则）。

我的英语太糟糕了。如果我无法解释清楚，请告诉我。

Answer 2

大屏幕总是占据您提供的最大尺寸。 E.g：

在所有屏幕尺寸

上，这将是12列宽

class="col-xs-12"

所有屏幕尺寸大于 XS

，这将是6列宽

class="col-xs-12 col-sm-6"

所有屏幕尺寸大于 MD

，这将是4列宽

class="col-xs-12 col-sm-6 col-md-4"

对于隐藏的标签，场景有点不同。内容将专门隐藏在您提供的尺寸上。因此，hidden-xs仅隐藏在XS屏幕上（另请参阅：http://getbootstrap.com/css/#responsive-utilities-classes）。

使用col-sm＆amp;我的剃刀视图里面的col-xs

2 个答案: