Bootstrap 4 助手类 pull-xs-left

Question

这在理论上应该行得通吗？我试图将此框向右浮动...在 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>

感谢您的帮助！

Answer 1

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

您仍然可以在示例的 BS4 版本中使用左拉和右拉。

Answer 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/

Bootstrap 4 助手类 pull-xs-left

Boostrap4 helper classes pull-xs-left

css

twitter-bootstrap

bootstrap-4

Bootstrap 4 助手 类 pull-xs-left

Boostrap4 helper classes pull-xs-left

css

twitter-bootstrap

bootstrap-4

Bootstrap 4 助手类 pull-xs-left