Question

当[2]高于[1]

时，希望列[3]向上移动

[1] [2]

[3] [4]

以下是布局的动态：http://www.bootply.com/KbAf8UOk9c

列[1]和[3]之间有空格，我希望列[3]向上移动。

（只是fyi，第[4]栏已经被设置为在列[2]下移动）

谢谢

更新：在移动视图中，列需要堆叠（与booply相同）：

[1]

[2]

[3]

[4]

更新2 我仍在努力解决这个问题，而且还没有弄清楚解决方案。

Answer 1

基本上，您可以使用嵌套的row类来实现此目的：

<div class="container" style="border:1px solid black;">
  <div class="row">
    <div class="col-xs-8" style="border:1px solid black;">
      <div class="row">
        <div class="col-xs-12" style="border:1px solid black;">
          <p>[1] Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in, vel te munere ubique temporibus. Ius essent integre ne, te mel autem quaeque, ad omnes voluptua salutandi mel. Vitae perpetua abhorreant cum et, est definitiones vituperatoribus ea. Sed no admodum temporibus reformidans, id nam dolorem vivendo accusamus, et vel solum postulant.</p>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12" style="border:1px solid black;">
          <p>[3] Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in</p>
        </div>
      </div>
    </div>
    <div class="col-xs-4" style="border:1px solid black;">
      <div class="row">
        <div class="col-xs-12" style="border:1px solid black;">
          <p>[2] Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in</p>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12" style="border:1px solid black;">
          <p>[4] This column needs to shift up depending on the content onthe top-left section</p>
        </div>
      </div>
    </div>
  </div>
</div>

最初的row包含两列col-xs-8和col-xs-4，其中每列包含多个row和col-xs-12类。然后，根据内容，他们会根据上面的内容调整大小和上下移动。由于您有编号的列，奇数列在右侧col-xs-8，偶数列在左侧col-xs-4。

有关示例，请参阅此Bootply。

另外，我使用了col-xs-*作为我的列，因为它们是最小的，适用于所有视图，但您可以将其更改为col-sm，col-md或{{ 1}}课程以满足您的需求。

Answer 2

不幸的是，没有提交工作解决方案（我希望只提供css解决方案）。我最终使用jQuery砌体找到解决方案：http://masonry.desandro.com/

如果您愿意，可以编写自己的自定义JavaScript来处理您的特定需求（如果完整的砌体逻辑过度）......但似乎需要JavaScript逻辑来补偿＆＃34;差距＆＃34; ...这是原始bootply示例的工作示例：http://www.codeply.com/go/mEdTy6E6mp 提示：对于砌体逻辑，您可以将columnWidth值设置为最小的列宽/类 - 对于我来说是.col-md-4 - 当列宽不完全相同时。

如何向上移动堆叠列（使用bootstrap，但任何css都可以）

2 个答案: