Bootstrap 中卡片頁腳中心的按鈕

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

引導程序 3

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

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

---

引導程序 4.0+

在 Bootstrap 4.0+ 上，不再有.pull-left或.pull-right 。 您必須改用.float-left和.float-right 。 您還可以使用.text-center center 將第二個按鈕居中。

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <div class="card-footer text-center"> <button class="btn btn-dark float-left" type="button" id="toleft">&lt;</button> <button class="btn btn-dark" type="button" id="more">+</button> <button class="btn btn-dark float-right" type="button" id="toright">&gt;</button> </div>

---

注意：我不建議使用自定義 CSS 規則。 Bootstrap 是一個 CSS 框架，為許多設計問題提供解決方案。 覆蓋組件上的 CSS 屬性可能會導致問題。

Answer 2

如果您在 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 3

剛剛使用 Bootstrap 4 的最新 alpha6 版本嘗試了這個（我假設您在使用 BS4 時提到了卡片組件），看起來默認行為是將卡片頁腳中的按鈕對齊到中間。

請注意，我還必須引入.pull-left / .pull-right實用程序類，因為它們似乎不再在 Bootstrap CSS 中定義。

請參閱下面的演示：

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

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

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>