Question

我正在尝试建立一些注册公式，目前由3组元素组成。

一组输入（蓝色）
复选框+提交按钮（绿色）
更多输入（橙色）

最初，我有一个两列布局，其中蓝色和绿色在左边，橙色是右列（如左图所示）。当屏幕变窄时，橙色框会在绿色框下方突破。但是由于绿色框包含提交按钮，我更喜欢在蓝色和绿色框之间进行橙色中断（种类），如右图所示。

我曾尝试过使用bootstrap提供的推拉类，但却无法得到我想要的东西。目前我甚至不确定这是否真的可行。

“最佳”结果只是将3个方框按col-md-6按顺序排列为蓝色，橙色和绿色，但由于橙色方框比蓝色方框高，绿色顶部与橙色底部对齐之一。

我真的希望有人知道如何实现我想要的行为

提前致谢！

更新：在我看来，这个问题不是How can I "wrap" divs with Twitter Bootstrap 3?

我会尝试在目前的情况下提供更好的样本。

我目前的情况看起来像这个代码：http://codepen.io/anon/pen/ObNXxr 我使用与图像中相同的边框颜色。

对于窄屏幕，这具有所需的行为，但在更宽的屏幕上，绿色框的顶部边框与橙色框的底部边框位于同一条线上。但是我想在蓝框下方放置绿框，如图中左图所示。

更新 - ＆gt; ANSWER

很遗憾我不能将此作为答案发布，因为该问题被错误地视为重复

我找到了解决方案。您可以在此处查看更新代码集：http://codepen.io/anon/pen/rWMmvZ

我通过添加

@media ( min-width : 992px) {
    .register .right-panel {
        float: right;
    }
}

并在面板上的register div和row上添加了right-panel类，该面板应该在右侧可见（橙色的）。这允许绿色框在大视口的蓝色正下方向上移动，并在较小的屏幕上将橙色捕捉到蓝色和绿色之间。

Answer 1

解决方案1：

body { padding-top: 50px; }
.content {
  background-color: #eee;
  border: 1px dashed #ccc;
  padding: 50px;
  text-align: center;
}

body::before {
  content: "xs";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  background-color: #000;
  color: #fff;
}
@media (min-width : 768px) { 
  body::before { 
    content: "sm"; 
  }
}
@media (min-width : 992px) { 
  body::before { 
    content: "md"; 
  }
}
@media (min-width : 1200px) { 
  body::before { 
    content: "lg"; 
  }
}

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-push-6">
      <div class="content">
        <h1>Column A</h1>
      </div>
    </div>
    <div class="col-sm-6 col-sm-pull-6">
      <div class="content">
        <h1>Column B</h1>
      </div>
    </div>
  </div>
</div>

这可能会有帮助.... 注意：浏览器中的Ckeckout ..

解决方案2：

在css中添加以下代码：

.col-md-push-6 {
left: 50%;
}

.col-md-pull-6 {
right: 50%;
}

Checkout This Snippest：

body { padding-top: 50px; }
.content {
  background-color: #eee;
  border: 1px dashed #ccc;
  padding: 50px;
  text-align: center;
}

body::before {
  content: "xs";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  background-color: #000;
  color: #fff;
}
.col-md-push-6 {
left: 50%;
}
 
.col-md-pull-6 {
right: 50%;
}

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-push-6">
      <div class="content">
        <h1>Column A</h1>
      </div>
    </div>
    <div class="col-sm-6 col-sm-pull-6">
      <div class="content">
        <h1>Column B</h1>
      </div>
    </div>
  </div>
</div>

在断点处更改bootstrap3中列的顺序

1 个答案: