0

我一直在做一些尝试构建一个移动应用程序来使用电话间隙。在定义布局时，虽然我有一些问题：

我想构建一个带有侧滚动的单页布局，使用与轮播图片库相同的效果，但我不想切换图像，而是在页面之间切换。

我想实现类似轮播的效果切换“页面”，并且正在考虑使用 Bootstrap 或Ink之类的东西并使用提供的布局，以便我可以让每一列都表现为不同的屏幕。就像这里解释在此处输入图像描述的那样，红色方块代表当前可视化的屏幕（或列），蓝色方块是“不可见”的屏幕（或列）。因此，正如您所看到的，每一列都应该“缩放”以填充屏幕/视口。

从两个框架中阅读文档我看不到如何实现这一点，因为列定义是

默认的 Bootstrap 网格系统使用 12 列，形成一个 940 像素宽的容器，没有启用响应功能。添加响应式 CSS 文件后，网格会根据您的视口调整为 724 像素和 1170 像素宽。在 767px 视口以下，列变得流畅并垂直堆叠。

对于引导程序和

使用 Ink，您可以使用三种布局来满足您的需求。

S 代表小 M 代表中 L 代表大 默认情况下，这些对应于以下屏幕尺寸间隔（我们将在几秒钟内展示如何自定义这些间隔）：

小：650 像素以下 中：651 到 960 像素宽 大：961 像素以上

对于墨水。

所以，据我所知，我不能完全达到预期的效果。

我的问题是：如何获得想要的效果，如何让 bootstrap 或 Ink 更改其列定义，以便每列代表一个屏幕（或一组列，因为它们的总和必须为 12 列）？这甚至可能吗？还有其他我应该考虑的选择吗？

最好的问候， 塞尔索桑托斯

4

2 回答 2

2

我没有对此进行测试，但它可能会在没有任何奇怪库的情况下在 CSS3 中发挥作用。

首先创建一个像这样的html布局：

<div id="wrapper">
  <header>Website header</header>
  <section>
    <header>Page header</header>
    <div class="main">
    </div>
  </section>
  <section>
    <header>Page header</header>
    <div class="main">
    </div>
  </section>
  <section>
    <header>Page header</header>
    <div class="main">
    </div>
  </section>
</div>

然后使用 CSS table 和 table-cell 创建列效果。给表格的宽度为 100*children 很重要

html, body { height: 100%; }
#wrapper { display: table; width: 400%; margin-top: 100px; }
#wrapper > header { position: fixed; top: 0px; height: 100px; width: 100%; } 
#wrapper > section { display: table-cell; height: 100%; width: 25%; }

一个很好的副作用是，当屏幕旋转时，页面只会旋转和缩放（如果设置）

编辑：允许每个部分的边距

<div id="wrapper">
  <header>Website header</header>
  <section>
    <div class="page_wrapper">
      <div class="page_bubble">
        <header>Page header</header>
        <div class="main">
        </div>
      </div>
    </div>
  </section>
  <section>
    <div class="page_wrapper">
      <div class="page_bubble">
        <header>Page header</header>
        <div class="main">
        </div>
      </div>
    </div>
  </section>
  <section>
    <div class="page_wrapper">
      <div class="page_bubble">
        <header>Page header</header>
        <div class="main">
        </div>
      </div>
    </div>
  </section>
</div>

每个 html 部分现在都有一个包装器和一个“气泡”。将包装器设置为 position: relative 并将容器设置为 position: absolute ，如下所示：

.page_wrapper { position: relative; width: 100%; height: 100%; } 
.page_bubble { position: absolute; top: 0px; right: 25px; bottom: 0px; left: 25px; }

在一些具有高度和宽度的包装器中定义绝对位置的所有边时。它以某种方式表现为填充相对包装器的拉伸容器（在这种情况下）左右两侧的边距为 25px，当内部内容超过高度或宽度时也允许自动溢出:) 有关这个小 CSS 'hack' 的更多信息：

超拉伸元素

于 2013-01-05T03:52:30.513 回答
1

除了上面的答案以及对“如何在使用像上面的代码这样的表格单元结构时允许一些边距？”这个问题的答案之外。

由于表格单元格不允许您使用边距，因此您可以使用容器。在我的工作方式中，它们是包装器和容器的区别。包装器就像一个真正的包装器，就像糖果条（适合其内容）一样，容器占用空间并像船上的海运集装箱一样。容器放在船上，但可以挂在船边界外（对于命名约定很重要）现在让我们开始使用技巧：

下面是相同的示例，并添加了一些内容

<div id="wrapper">
  <header>Website header</header>
  <div class="cell">
    <section>
      <div class="container">
        <header>Home header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
  <div class="cell">
    <section>
      <div class="container">
        <header>Page 2 header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
  <div class="cell">
    <section>
      <div class="container">
        <header>Page 3 header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
  <div class="cell">
    <section>
      <div class="container">
        <header>Page 4 header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
</div>

  html, body, #wrapper { height: 100%; }
  #wrapper { display: table; width: 400%; margin-top: 100px; }
  #wrapper > header { position: fixed; top: 0px; height: 100px; width: 100%; } 
  #wrapper > .cell { display: table-cell; height: 100%; width: 25%; }
  /* set position relative in the section since position relative on cells don't work */
  #wrapper > .cell > section { position: relative; height: 100%; }

下一条规则是所谓的 CSS hack。以某种奇怪的方式，这会将元素拉伸到 100% 的高度和宽度 请记住，必须设置所有 5 条规则（绝对位置、顶部、左侧、右侧和底部）在这种情况下，我给了左侧和右侧 15px，这将.container 15px 在“船舶边界”上。也可以在容器上使用溢出-y。以某种奇怪的方式，滚动条确实适用于这种流畅的设计方法（不要问为什么，但它很棒）

#wrapper > .cell > section > .container { 
  position: absolute; 
  top: 0px; right: 15px; bottom: 0px; left: 15px; 
  overflow-y: auto; border: 1px solid #000000; 
}

正如您所看到的，它并不是真正的魔法，但它确实有效，并且因为您使用严格的名称与 '>' 选择器组合，它不会影响任何其他元素，这允许您在几乎所有流畅的网站设计中使用它。

于 2013-01-13T22:10:39.447 回答