Bootstrap 4 辅助类 pulls-left答案

【问题标题】：Boostrap4 helper classes pull-xs-leftBootstrap 4 辅助类 pulls-left
【发布时间】：2018-04-03 04:02:58
【问题描述】：

这在理论上应该有效，不是吗？我正在尝试将此框向右浮动...在一行有 3 列...我在这里做错了什么？

这是一支笔：https://codepen.io/lucky500/pen/JbMMby

<div class="container">
  <div class="row">
  <div class="column col-xs-4 pull-xs-left">
    <div class="card card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
</div>
</div>

感谢您的帮助！

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

您在 codepen 中使用的 bootstrap 4 版本不包含 pull-{breakpoint}-{left/right}。 BS4 的类最近在迅速变化，因此您可能无法在其文档中使用类。例如，pull- 最近才更改为 float-。

您仍然可以在示例版本的 BS4 中使用 pull-left 和 pull-right。

【讨论】：

【解决方案2】：

Bootstrap4 扩展包含 col-pull-* 和 col-push-* 类。

解决方案：

    <div class="container">
        <div class="row">
            <div class="column col-xs-4 col-push-3">
                <div class="card card-block">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
    </div>

http://bootstrap-extension.com/

【讨论】：

请在此处填写相关详细信息。