Question

我想知道这是否可能使用MINIMAL数量的javascript或jQuery。

我有一个三列布局：colA，colB，colC，上面有一个标题和导航，下面是一个页脚。

HTML：

<header></header>
<nav></nav>
<div class="container">
   <div class="container-fluid">
      <div class="col-ms-3" id="colA"></div>
      <div class="col-md-6" id="colB"></div>
      <div class="col-md-3" id="colC"></div>
   </div>
</div>
<footer></footer>

一切都很好，花花公子，作为一个自助孩子。但我想知道方法是否在那里，以便在手机上查看时，所有内容都缩小为一列，以便中间列（colB）显示在顶部，而不是在colA和colC之间

Answer 1

您可以将css flexbox与媒体查询结合使用这是一个很好的教程的链接 http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Bootstrap框架本身已经拥有了完成此任务所需的一切，无需借助Flexbox，其他媒体查询或复制内容。

首先，Bootstrap设计为移动优先，因此请根据您希望它在该断点处显示的方式创建布局。

<div class="container">
   <div class="col-xs-12" id="colB"></div>
   <div class="col-xs-12" id="colA"></div>
   <div class="col-xs-12" id="colC"></div>
</div>

然后，您可以为其他断点添加所需的大小，并使用bootstrap的col-*-push-*和col-*-pull-*类将它们重新排序到正确的位置。

<div class="container">
   <div class="col-xs-12 col-sm-6 col-sm-push-3" id="colB"></div>
   <div class="col-xs-12 col-sm-3 col-sm-pull-6" id="colA"></div>
   <div class="col-xs-12 col-sm-3" id="colC"></div>
</div>

可以在此处找到更多信息：http://getbootstrap.com/css/#grid-column-ordering

此外，.container-fluid内有.container。除了为您提供额外的15px左右填充外，这没有任何实际效果。我从我的例子中删除了它。

以下是一个实例：http://www.bootply.com/CsUTEnC51Q

Answer 3

实际上，只需少量HTML即可实现。 Bootstrap有一些内置的类来显示或隐藏元素，具体取决于当前的屏幕分辨率。例如，

<div class="visible-xs hidden-sm hidden-md hidden-lg">
  // Content
</div>

将呈现仅在屏幕分辨率超小或移动时显示的<div>元素。这些元素有hidden-*和visible-*变体，其中*是上面列出的4种尺寸中的任何一种。使用这些变量设计布局是完全可能的。在你的情况下：

<div class="container-fluid hidden-xs visible-sm visible-md visible-lg">
  <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3" id="colA">A</div>
    <div class="col-lg-6 col-md-6 col-sm-6" id="colB">B</div>
    <div class="col-lg-3 col-md-3 col-sm-3" id="colC">C</div>
  </div>
</div>
<div class="container-fluid visible-xs hidden-sm hidden-md hidden-lg">
  <div class="row">
    <div class="col-xs-12" id="colB">B</div>
  </div>
  <div class="row">
    <div class="col-xs-12" id="colA">A</div>
  </div>
  <div class="row">
    <div class="col-xs-12" id="colC">C</div>
  </div>
</div>

这将呈现仅在不同屏幕分辨率下显示和重新排列的2个<div>元素。请参阅此示例以了解我的意思：

Bootply

希望能给你一些见解！

响应式三柱重建

3 个答案: