Question

我遇到的情况是，当页面宽度较小（移动）时我想要水平，而当宽度较宽（桌面）时我需要垂直。当宽度较小时，面板可以水平滚动。像这样：

Small (mobile):

    ☐☐☐☐☐☐

Big (desktop):

    ☐
    ☐
    ☐
    ☐
    ☐

当屏幕较小（w：267 h：215）和较大（w：324 h：auto）时，我希望面板设置为设定尺寸。我尝试使用网格系统。我很幸运，面板堆叠但是当屏幕较小时将所有面板安装在一个容器中即使使用也更麻烦。我试过这个：

HTML

<div class="container panels">
  <div class="row">
    // col-xs-2 because 2 * 6 = 12
    <div class="col-xs-2"></div>
    // five more of these
  </div>
</div>

CSS

.panels {
  overflow-x: hidden;
  white-space: nowrap;
  // this makes the text within the panels go outside of the
  // panel if it's really long
}

我接近这个权利吗？

Answer 1

通常是相反的方法，但你可以通过在大视图中指定宽度来实现它：

<div class="container panels">
  <div class="row">
    <div lass="col-xs-2 col-lg-12"></div>
    // five more of these
   </div>
</div>

Answer 2

将容器的样式设置为overflow-x: hidden并删除`white-space：nowrap＆＃34;诀窍

还声明类中面板的大小可以解决大小问题

Bootstrap - 如何在较低分辨率下使列水平，在较高分辨率时使列垂直

2 个答案: