Question

我有一个示例页面，其中有三个div如下：

＆＃13;

<body class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6 col-md-push-6 col-lg-push-0"></div>
    <div class="col-lg-4 col-md-6 col-md-pull-6 col-lg-pull-0"></div>
    <div class="col-lg-4 col-md-6 col-md-push-6 col-lg-push-0"></div>
  </div>
</body>

＆＃13;

当浏览器尺寸达到md点且第二div高于第一个div时，第三个div会转到第一个setTimeout()的右侧。我应该如何更改网格实现来修复它？我在codepen.io

上有代码

Answer 1

Sytax错误：

无需col-lg-4.col-md-6将其替换为col-lg-4 col-md-6

 <body class="container">
   <div class="row">
    <div class="col-lg-4 col-md-6 col-md-push-6 col-lg-push-0"></div>
    <div class="col-lg-4 col-md-6 col-md-pull-6 col-lg-pull-0"></div>
    <div class="col-lg-4 col-md-6 col-md-push-6 col-lg-push-0"></div>
   </div>
 </body>

如果你将最后一个col-md-push-6和col-lg-push-0替换为col-md-offset-6和col-lg-offset-0。它应该按照你想要的方式运作。

这是分叉codepen

这是因为偏移的工作方式不同于push in bootstrap。 Here is reason

Answer 2

<body class="container">
   <div class="row">
    <div class="col-lg-4 col-md-6 col-md-push-6 col-lg-push-0"></div>
    <div class="col-lg-4 col-md-6 col-md-pull-6 col-lg-pull-0"></div>
    <div class="col-lg-4 col-md-6 col-md-pull-6 col-lg-push-0"></div>
   </div>
 </body>

如何在使用col - * - pull或col - * - push时浮动div元素？

2 个答案: