Question

我有.card-footer：

<div class="card-footer">
    <button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
    <button class="btn btn-theme" type="button" id="more">+</button>
    <button class="btn btn-theme pull-right" type="button" id="toright">></button>
</div>

按钮.toleft和.toright位于正确的位置，但按钮#more应该正好位于页脚的中心，但它仍然位于左侧。

有什么想法吗？

Answer 1

bootstrap版本3的解决方案

您可以使用以下解决方案将.text-center添加到.card-footer容器中：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-footer text-center">
  <button class="btn btn-theme pull-left" type="button" id="toleft">&lt;</button>
  <button class="btn btn-theme" type="button" id="more">+</button>
  <button class="btn btn-theme pull-right" type="button" id="toright">&gt;</button>
</div>

＆＃13;

bootstrap版本4的解决方案

在bootstrap版本4上没有类.pull-left或.pull-right。因此，您必须将其替换为.float-left和.float-right。您也可以使用.text-center将第二个按钮居中。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-footer text-center">
  <button class="btn btn-theme float-left" type="button" id="toleft">&lt;</button>
  <button class="btn btn-theme" type="button" id="more">+</button>
  <button class="btn btn-theme float-right" type="button" id="toright">&gt;</button>
</div>

＆＃13;

我不建议使用自定义CSS规则。 Bootstrap是一个CSS框架，为许多设计问题提供解决方案。覆盖组件上的CSS属性可能会导致问题。

Answer 2

尝试使用Bootstrap 4的最新alpha6版本（我假设你正在使用BS4，因为你提到了卡片组件），看起来好像默认行为是对齐卡片中的按钮无论如何，页脚到中间。

请注意，我还必须引入.pull-left / .pull-right实用程序类，因为它们似乎不再在Bootstrap CSS中定义。

见下面的演示：

＆＃13;

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    <button class="btn btn-theme pull-left" type="button" id="toleft">&lt;</button>
    <button class="btn btn-theme" type="button" id="more">+</button>
    <button class="btn btn-theme pull-right" type="button" id="toright">&gt;</button> </div>
</div>

＆＃13;

Answer 3

如果您在2018年或以后看到此消息，请注意，其中一些旧答案将不适用于Bootstrap 4 ...

但是，没有必要像先前的几个答案中那样包含其他CSS。

pull-left和pull-right类在Bootstrap 4中不再起作用。

相反，我们现在使用float-left和float-right浮动左右按钮。

要获得所需效果，最简单的方法是先在页脚中添加text-center类，然后将页脚内容居中。

接下来，我们可以使用float-left类浮动鼠标左键，而使用float-right类浮动鼠标右键。

这是最终的HTML：

<div class="card-footer text-center">
<button class="btn btn-theme float-left" type="button" id="toleft">left</button>
<button class="btn btn-theme" type="button" id="more">center</button>
<button class="btn btn-theme float-right" type="button" id="toright">right</button>
</div>

哪个可以给我们带来以下结果：

Answer 4

试试这个：

.card-footer{
    text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="card-footer">
     <button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
     <button class="btn btn-theme" type="button" id="more">+</button>
     <button class="btn btn-theme pull-right" type="button" id="toright">></button>
 </div>

Bootstraps

4 个答案: