使用Bootstrap v4将按钮对齐到“卡”的右侧

时间:2015-11-08 17:36:05

标签: html css twitter-bootstrap twitter-bootstrap-4 bootstrap-4

我是Bootstrap的新手,并且认为我会使用他们的v4 alpha版本。

我正在尝试将以下示例中的“安排评估”按钮(靠近页面底部)对齐到右侧,同时将其他文本对齐到左侧。我还需要文本和按钮在中间垂直对齐。

http://www.atlasestateagents.co.uk/mlb/landlords/services-and-fees.php

你能帮忙吗?

<div class="card card-block card-blue clearfix">
    <p class="card-text">Want to know how much rent you could achieve for your property?&nbsp;<a href="#" class="btn btn-blue-outline pull-right">Arrange a Valuation</a></p>
  </div>

2 个答案:

答案 0 :(得分:7)

在最新的Bootstrap 4(alpha 6)pull-right现在是float-right

<div class="card card-block card-outline-primary">
    <p class="card-text">Want to know how much rent you could achieve for your property? &nbsp;
        <a href="#" class="btn btn-outline-primary float-right">Arrange a Valuation</a>
     </p>
</div>

http://www.codeply.com/go/D2i7JWqv4d

答案 1 :(得分:0)

.pull-right添加到标记的类中。

<div class="card card-block card-primary">
    <p class="card-text">Want to know how much rent you could achieve for your property?&nbsp;<a href="#" class="btn btn-primary-outline pull-right">Arrange a Valuation</a></p>
</div>