引导程序中的响应对齐答案

【问题标题】：Responsive alignment in bootstrap引导程序中的响应对齐
【发布时间】：2015-04-17 02:29:43
【问题描述】：

我想在一行中有 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 并留在所有其他设备上？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

Twitter bootstrap 有帮助类，可以用于你想要做的事情，尝试使用 offset .pull 和 .push 类，像 col-md-push-3 这样的东西只会推送你的 3 列用于 .md 和 .lg类，如果您想在移动设备上获得不同的行为，只需将其重置为 col-xs-push-0。

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

【讨论】：

【解决方案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，它会彼此相邻。

【讨论】：

【解决方案3】：

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

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

http://bootply.com/i145F3q1Ji

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

使用 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

【讨论】：