Bootstrap：左對齊按鈕文本

Question

如何在引導按鈕中將文本向左對齊？ 我有多個帶有不同長度文本的按鈕，並且所有按鈕都需要具有相同的寬度。 我已經使用類col-xs-11實現了這一點。

下面的示例按鈕代碼：

<input type="button" value="Applicant/Subsidiary" id="mybutton" name="test" class="primary-btn col-xs-11">

除了引導程序提供的之外，是否可以在不創建自定義樣式的情況下實現這一點？ 我正在使用 Bootstrap v3.0.1

Answer 1

問題不在於如何將CSS文本對齊到左側，原始帖子詢問是否有引導類名稱適用於它。

.text-left有效，但問題是有一個比text-left強的.btn，我認為這是bootstrap需要考慮的事情。

查看此屏幕截圖，我在Bootstrap的網站上使用Chrome檢查進行了測試。

在我的Chrome中，我在演示按鈕上添加了“text-left”，這就是結果。 因此，有重要的！

.text-left {
  text-align: left !important;
}

Answer 2

只需添加text-left類

<input type="button" value="Applicant/Subsidiary" id="mybutton" name="test" class="primary-btn col-xs-11 text-left">

Answer 3

或者使用內聯樣式，如果只有一個按鈕

style="text-align:left; padding-left:6px"

Answer 4

您可以以正常方式應用css，而不是使用其他類。

/*specific button*/    
#mybutton {
   text-align: left;
}

/*all input that have type button*/
input[type='button'] {
   text-align: left;
}

Answer 5

只需在按鈕定義中添加！important即可強制使用。

Answer 6

我最近在搜索如何在使用 flex 時對齊 Bootstrap 5 中左側的按鈕文本時遇到了這個問題，使用text-left的解決方案在這種情況下不起作用，並且由於flex在 Bootstrap 5 中無處不在，我雖然分享以下示例可能幫助某人：

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="d-flex"> <div class="btn btn-outline-secondary text-start flex-grow-1">wide text</div> <div class="btn btn-outline-info">text</div> </div>

Answer 7

給按鈕類“text-start”： <button type="button" class="btn btn-primary btn-lg btn-block alert-primary col-12 text-start"><i class="fab fa-apple"></i> Lorem ipsum</button>