Question

在智能手机上查看时，我需要显示3列页面才能变成手风琴。我看看是否有任何示例或教程，但我没有碰到任何。我发现将标签更改为手风琴，但是，这是一个有3列的基本页面，当它调整为较小的屏幕尺寸时，它需要变成手风琴。任何链接或建议将不胜感激。

Answer 1

您可以使用flexbox执行此操作

＆＃13;

.container {
  display: flex;
}

.container > div {
  flex: 1;
  height: 150px;
  border: 1px solid gray;
  transition: flex 0.5s;
}


@media screen and (max-width: 800px) {
  .container > div {
    flex: 0;
  }
  .container > div:nth-child(1) {
    flex: 1;
  }
  .container:hover > div {
    flex: 0;
  }
  .container > div:hover {
    flex: 1;
  }
}

＆＃13;

    <div class="container">
      <div class="left">Left</div>
      <div class="middle">Middle</div>
      <div class="right">Right</div>
    </div>

＆＃13;

Answer 2

试试这个：

<强>的index.html

u8 is undefined

<强>的style.css

  <body>
    <div class="container">
      <div class="section section--1">Section 1</div>
      <div class="section section--2">Section 2</div>
      <div class="section section--3">Section 3</div>
    </div>
  </body>

我希望我能够帮助你。

Answer 3

这是一个使用几行jQuery在屏幕上查看480px（或任何宽度）或更小时将collapse值添加到Bootstrap的data-toggle属性的示例。

  $(function(){
    if($(window).width() <= 480) {
        $("#col1, #col2").attr("data-toggle", "collapse");
    }
  })

注意：如果您只是调整浏览器的大小，则必须刷新页面（并确保将小提琴结果窗口的大小调整为小于480px以查看效果），但它仍然会在移动设备上制作您的列手风琴，同时在更大的屏幕上正常显示。

Fiddle

Answer 4

很抱歉，我们花了很长时间才回复你。所有建议的代码都很棒。我最终做的是隐藏手风琴并让它在移动尺寸上可见，然后隐藏了主要内容。刚用过css。

调整大小后，将3列更改为手风琴

4 个答案: