Question

我正面临一个引导问题。

在我的html页面中，我使用了不同的容器，但我无法在移动屏幕中重新安排和重新组织它们。

Here my Bootply.

更清楚的是，我希望它看起来像这样：

容器1和5是流体，而不是2,3,4不是。

如何在3和4之后的小屏幕中移动容器1和2？

提前感谢您的回复！

干杯！

Answer 1

如果不重新安排内容，则无法做到这一点。

一种方法是根据浏览器的宽度制作要重新排列的区域的两个版本并隐藏它们。这是不好的做法，特别是如果你有一个整个网站要重新调整大小，但对于一个内部有5个div的小div，这将是一个可接受的解决方案。

以下是改编的HTML

<div class="desktopwrapper"> <!-- added a desktop wrapper -->
  <div class="container-fluid green"></div>
  <div class="container red"></div>
  <div class="container ">
    <div class="row">
      <div class="col-sm-8 yellow"></div>
      <div class="col-sm-4 fuxia"></div>
    </div>
  </div>
  <div class="container-fluid blue"></div>
</div>

<div class="mobilewrapper"> <!-- added a mobile wrapper and rearranged content -->
  <div class="container ">
    <div class="row">
      <div class="col-sm-8 yellow"></div>
      <div class="col-sm-4 fuxia"></div>
    </div>
  </div>
  <div class="container-fluid green"></div>
  <div class="container red"></div>
  <div class="container-fluid blue"></div>
</div>

我已将这些行添加到CSS中：

@media screen and (max-width: 766px) {
  .desktopwrapper {
      display:none;
  }
}

@media screen and (min-width: 767px) {
  .mobilewrapper {
      display:none;
  }
}

这基本上做的是，当屏幕调整为766px宽并显示另一个时隐藏一个排列。当然还有另一种方式。

您可以尝试here。

另一种方法是将所有内容放在包装器中，position包装器relative，absolute内的所有div，然后使用px放置它们。然而，当div根据内容改变高度时，这实际上没有用。最好的方法就是像我的例子一样。

Answer 2

flexbox概念验证。

＆＃13;

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  color: white;
  text-align: center;
}
body {
  height: 100%;
}
h2 {
  display: inline-block;
  background: #000;
  padding: .25em;
}
.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  flex: 0 0 75px;
  background: darkgreen;
}
.banner {
  flex: 0 0 100px;
  width: 80%;
  margin: auto;
  background: darkred;
}
main {
  flex: 1;
  width: 80%;
  margin: auto;
  display: flex;
}
.content {
  width: 75%;
  background: yellow;
}
aside {
  width: 25%;
  background: fuchsia;
}
footer {
  flex: 0 0 100px;
  background: lightblue;
}
@media screen and (max-width: 768px) {
  .banner,
  main {
    width: 100%;
  }
  main {
    flex-direction: column;
    order: -1;
  }
  .content,
  aside {
    flex: 1;
    width: 100%;
  }
  aside {
    flex: 0 0 150px
  }
}

＆＃13;

<div class="page">
  <header>
    <h2>1</h2>
  </header>
  <div class="banner">
    <h2>2</h2>
  </div>
  <main>
    <div class="content">
      <h2>3</h2>
    </div>
    <aside>
      <h2>4</h2>
    </aside>
  </main>
  <footer>
    <h2>5</h2>
  </footer>
</div>

＆＃13;

Codepen Demo

Bootstrap：在小屏幕上更改容器订单

2 个答案: