twitter-bootstrap - 在 bootstrap/kickstrap 中使用媒体查询的完全不同的布局

Question

所以我正在使用 kickstrap 开发一个网络应用程序，尽管这在根本上是一个 Bootstrap 问题。

我需要每个媒体查询/屏幕尺寸完全不同的布局(即 html 结构)。这意味着当在平板电脑和手机上查看时，特定的 html 元素会移动到屏幕上完全不同的位置，从而变成不同的 span(s) 宽度等。

这在某种程度上是可行的，但我不确定我的处理方式是否正确。

现在我有我的桌面 html，我使用 bootstrap responsive-utilities 来隐藏和显示。示例:我的主要桌面 View 是“visible-desktop hidden-tablet hidden-phone”

然后我为 979px - 768px 媒体查询和使用“hidden-desktop visible tablet hidden-phone”使用相同的 html block (根据布局更改的需要进行修改)。

我认为这是跟踪各种布局并在以后必要时进行更改的最简单方法。然而，问题是当我到达电话布局时。我需要一个独特的手机风景和一个独特的手机肖像。使用隐藏/可见电话不允许我区分两者。

所以我想我的第一个问题是......这是满足我需求的好方法还是我完全走错了路？如果我的想法错了，我该怎么办？

Answer 1

您可以创建几个响应实用程序来微调移动布局(LESS 源):

.visible-xs-portrait,
.visible-xs-landscape {
  display: none !important;
}

.visible-xs-portrait{
  @media (max-width: @screen-xs-max)  and (orientation:portrait) {
    display: block;
  }
} 

.visible-xs-landscape{
  @media (max-width: @screen-xs-max)  and (orientation:landscape) {
    display: block;
  }
}

如果您在人造表格元素上使用它，请将 display:block 替换为 .responsive-visibility();。

至于一般策略，推/拉类或 flexbox 可能是更有效的方法。如果没有页面示例和您的浏览器支持要求，就不能说。