Question

我需要实现一个非常奇怪的布局，我实际上使用的是bootstrap。我有3个方框：A，B和C A.height = B.height + C.height。在移动设备上，它们应按以下顺序呈现：

|B|
|A|
|C|

在桌面上我需要以下布局：

|A||B|
| ||C|

（基本上A是左栏，B和C在右侧）

我无法弄清楚C应该如何定位。实际上我有这个代码，它在移动设备上是完美的，但在桌面上产生以下布局：

|A||B|
| |
|C|

代码：

<div class="container">
  <div class="col-sm-12 col-md-6 col-md-push-6">B</div>
  <div class="col-sm-12 col-md-6 col-md-push-6">A</div>
  <div class="col-sm-12 col-md-6">C</div>
 </div>

否则，将B和C放在同一个框中可以很好地在桌面上生成

|B|
|C|
|A|

在手机上。

你有什么建议吗？

Answer 1

以下结构将解决您的问题：

<div class="container">
  <div class="col-xs-12 col-md-6 pull-right">B</div>
  <div class="col-xs-12 col-md-6">A</div>
  <div class="col-xs-12 col-md-6 pull-right">C</div>
</div>

＆＃13;

.box-B,
.box-C {
  background: green;
  height: 200px;
}

.box-A {
  background: blue;
  height: 400px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-xs-12 col-md-6 pull-right box-B">B</div>
  <div class="col-xs-12 col-md-6 box-A">A</div>
  <div class="col-xs-12 col-md-6 box-C pull-right">C</div>
 </div>

＆＃13;

Answer 2

尝试这样的C：

<div class="container">
  <div class="col-sm-12 col-md-6 col-md-push-6">B</div>
  <div class="col-sm-12 col-md-6 col-md-push-6">A</div>
  <div class="col-sm-12 col-md-6 coll-md-offset-6">C</div>
 </div>

OR：

<div class="container">
      <div class="col-sm-12 col-md-6 col-md-push-6">B</div>
      <div class="col-sm-12 col-md-6 col-md-push-6">A</div>
      <div class="col-sm-12 col-md-6 pull-right">C</div>
     </div>

要更改他们在手机或平板电脑中的观点，您可以使用已实施的课程，例如：

<div class="col-lg-12 col-xs-6">
<p></p>
</div>
<div class="col-lg-12 col-xs-6">
<p></p>
</div>

在笔记本电脑，台式电脑中，您会看到全宽，在手机中，您会看到两个div在一行中对齐。

你也可以使用col-xs-offset- *移动div位置，但你必须确保你有空间。例如： ---这是错误的 - 因为你只有12个cols并且你设置2 + 2个偏移量，这意味着你需要总共16个cols。

<div class="col-lg-12 col-xs-6 col-xs-offset-2">
    <p></p>
    </div>
    <div class="col-lg-12 col-xs-6 col-xs-offset-2">
    <p></p>
    </div>

---正确的方式---

<div class="col-lg-12 col-xs-4 col-xs-offset-2">
    <p></p>
    </div>
    <div class="col-lg-12 col-xs-4 col-xs-offset-2">
    <p></p>
    </div>

bootstrap中的类是：

lg - 桌面 md - 笔记本电脑 sm - 小型设备（平板电脑） xs - 超小型设备（手机）

与他们一起使用col-**-offset-**或col-**-hidden或col-**- visible 但是再一次，如果你要使用偏移，请确保你没有超过12 cols

希望这会对你有帮助！

Answer 3

使用行和右拉可以获得您正在寻找的效果：

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-md-push-6 pull-right">B</div>
    <div class="col-sm-12 col-md-6 col-md-push-6 pull-right">A</div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-6 pull-right">C</div>
  </div>
</div>

应该这样做。

在移动设备上更改自举订单 - 3个不同的框

3 个答案: