Question

我希望在一行中有2个按钮组，如下所示：

[a|b|c]                              [d|e|f|g|h]

目前，右键组是pull-right引导类。工作正常。

但这在 xs 设备上看起来很糟糕 - 因为它在一个新行中但仍然向右拉，如下所示：

[a|b|c]         
                 [d|e|f|g|h]

所以我基本上想要做的是组合pull-类。

pull-right pull-left-xs

这个例子不起作用。有类似的东西吗？否则：如何在 md 和 xl 设备上对齐我的内容right，并将其保留在所有其他设备上？

Answer 1

Twitter引导程序有辅助类可以用于你想要做的事情，尝试使用偏移.pull和.push类，像col-md-push-3这样只会为.md和.lg推送你的3列类，如果你想在移动设备上使用不同的行为，只需将其重置为col-xs-push-0即可。

点击此链接以获取参考http://getbootstrap.com/css/#grid-column-ordering

Answer 2

为什么你需要一个右拉。使用偏移量无法获得相同的效果。 http://getbootstrap.com/css/#grid-offsetting

所以例如你可以

<div class="row">
  <div class="col-sm-3 col-xs-4">[a|b|c]</div>
  <div class="col-sm-5 col-sm-offset-4 col-xs-8">[d|e|f|g|h]</div>
</div>

对于sm屏幕，它之间会有偏移间距，然后对于xs，它会将它放在一起。

Answer 3

你可以像这样使用媒体查询和自定义类..

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

http://bootply.com/i145F3q1Ji

Answer 4

我会避免修改Bootstrap类，因为它可能会影响您需要样式按原设计工作的网站的其他部分。您可能还会在将来为自己或他人创建可维护性挑战。此外，推和偏移没有正确对齐，所以它只能接近你想要的。

Bootstrap 4包括使用与网格系统相同的断点的响应类（例如.text-sm-right，.text-md-left等），它们可以作为解决方案相互结合使用。 https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment

Answer 5

旧帖子，但因为它是Google搜索的最佳答案...

使用Bootstrap v4，您可以使用float-*类。

<div class="row">
   <div class="col-md-6">
       Always left aligned
   </div>
   <div class="col-md-6 float-md-right">
       Right aligned for medium+, left aligned otherwise 
   </div>
</div>

https://getbootstrap.com/docs/4.1/utilities/float/#responsive

引导程序中的响应对齐

5 个答案: