我有一个关于 Bootstrap 3 的问题拉和推列排序。我做了一个简单的图像来解释我的问题。左侧是我的网格的 lg
和 md
版本。在右侧,它在 sm
中应该是什么样子。
在发现(感谢@Danko)Bootstrap 具有push
和pull
选项后,我做了以下操作:
<div class="col-lg-6 col-md-6 col-sm-8"></div>
<div class="col-lg-6 col-md-6 col-sm-8 col-sm-push-8"></div>
<div class="col-lg-3 col-md-3 col-sm-4 col-sm-pull-8"></div>
<div class="col-lg-3 col-md-3 col-sm-4 col-sm-pull-8"></div>
但我无法让它工作。首先,所有列在除 sm
之外的所有其他断点上都发生了奇怪的移动,而且在 sm
上,其中一个绿色框消失了。
我是不是搞错了拉和推的逻辑?真的需要一些帮助!
最佳答案
在这种情况下,除非您创建自定义媒体查询,否则无法通过推/拉获得您想要的内容。更好的方法可能是使用 Bootstrap 实用程序类来创建 2 个单独版本的标记。 1 个用于 md
/lg
1 个用于 xs
/sm
<div class="row hidden-md hidden-lg">
<div class="col-xs-8 col-md-6"> </div>
<div class="col-xs-4 col-md-6"> </div>
<div class="col-xs-4 col-md-6"> </div>
<div class="col-xs-8 col-md-6"> </div>
</div>
<div class="row hidden-xs hidden-sm">
<div class="col-md-6"> </div>
<div class="col-md-6"> </div>
<div class="col-md-3"> </div>
<div class="col-md-3"> </div>
</div>
关于html - Bootstrap 3 拉和推不按预期运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26886168/