按鈕在白手起家

卡頁腳的中心我有這個.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應該是完全的頁腳的中心，但它仍然在左邊。

任何想法？

來源

2017-06-10 prgrm

你可能引用引導v3的CSS？ '.card'是一個Bootstrap 4組件。請參閱下面的示例使用Bootstrap 4 CSS。 – Conan

試試這個：

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

來源

2017-06-10 12:50:10 Ehsan

自舉版本溶液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

在引導版本4上，沒有類別.pull-left或.pull-right。所以你必須用.float-left和.float-right來代替它們。您也可以使用.text-center來居中第二個按鈕。

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

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

來源

2017-06-10 12:45:42

與引導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>

來源

2017-06-10 12:51:23 Conan

按鈕在白手起家

回答

相關問題