如何將這些Bootstrap表單項對齊？

我第一次使用Bootstrap，並且在將這個表單水平向左對齊時遇到了很多麻煩。如何將這些Bootstrap表單項對齊？

列表項是水平的，因爲它們應該是這樣，但我希望控件標籤（表單標籤的Bootstrap類）全部位於左側浮動的相同位置。

表格包含在一個跨度爲7的div中，因爲我的網站是兩列--7列和4列。

以下是我的HTML。如果您在本頁http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms的「水平表格」下查看，您會看到標籤左對齊，但不是完全左對齊，因此標籤的開頭垂直位於同一位置。

<form class="form-horizontal"> 
    <div class="control-group"> 
     <label class="control-label" for="inputSaving">What are you saving for?</label> 
     <div class="controls"> 
      <input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc."> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="description">Add a short description</label> 
     <div class="controls"> 
      <textarea class="span4" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="categoryselect">Choose a Category</label> 
     <div class="controls"> 
      <select class="span4"> 
       <!-- Add some CSS and JS to make a placeholder value--> 
       <option value="Kittens">Kittens</option> 
       <option value="Keyboard Cat">Keyboard Cat</option> 
       <option value="Twitter Bird">Twitter Bird</option> 
      </select> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="goal">Your Saving Goal</label> 
     <div class="controls"> 
      <input type="text" class="span4" id="goal"> 
     </div> 
    </div> 
    <button class="btn btn-large btn-primary" type="button">Submit</button> 
</form>

來源

2013-01-10 Tom Maxwell

爲什麼沒有答案標記爲正確的這個問題？ –

如果你是說，你的問題是如何左對齊表單標籤，看是否能幫助：
http://jsfiddle.net/panchroma/8gYPQ/

嘗試改變文本對齊左/右在CSS

.form-horizontal .control-label{ 
/* text-align:right; */ 
text-align:left; 
background-color:#ffa; 
}

祝你好運！

來源

2013-01-11 03:01:29

更新了html並修正了提交按鈕的對齊方式：http://jsfiddle.net/n3f25Lkd/ – ganders

我不建議直接修改框架的源代碼，特別是如果您希望能夠保持它的最新狀態 - 也就是說，除非您願意分叉存儲庫併合並上遊代碼。 – djule5

一致認爲修改框架源代碼@ djule5並不是一個好主意，我建議將上述內容添加到網站的CSS中，以便覆蓋Bootstrap樣式。那麼你可以更新Bootstrap而不會丟失定製，這是否有道理？ –

而不是改變原來的引導CSS類創建一個新的CSS文件，將覆蓋默認樣式。

確保在包含bootstrap.css文件後包含新的css文件。

在新的CSS文件做

.form-horizontal .control-label{ 
    text-align:left !important; 
}

來源

2014-12-17 20:32:54

我建議永遠不要使用！重要的是如果有替代：http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – cederlof

請使用解決方案蒂姆B詹姆斯下面。重要！是一個不好的做法 –

「拉左」是你所需要的，它看起來像你正在使用引導2，我不知道如果是這樣，可以考慮引導3，除非這是一個巨大的返工！ ...對於Bootstrap 3，但你需要確保每行都有12列，否則你會遇到問題。

來源

2015-03-04 15:59:20 SupportLocusDev

「但您需要確保每行都有12列，否則您將遇到問題」 - 不正確。如果您定義的列少於12列，那麼您的數據將僅使用您定義的列，然後其餘列將爲空白。所以，如果你定義了一個col-x-4，col-x-5，col-x-1，那麼剩下的2列將是空的，並且一切都應該工作得很好。（注意，如果你定義了多於12列，那麼第12列之後的所有內容都會換行） – ganders

只是我的兩分錢。如果您使用的是Bootstrap 3，那麼我只需在您自己網站的樣式表中添加一個額外樣式，該樣式表控制着control-label的text-left樣式。

如果您要將text-left添加到標籤，默認情況下會有另一種樣式覆蓋此.form-horizontal .control-label。所以，如果你添加：

.form-horizontal .control-label.text-left{ 
    text-align: left; 
}

然後內置的text-left樣式正確應用於標籤。

來源

2015-05-21 10:29:16

正確答案 –

或者你會說「左」答案...哈哈 –

-1

我有完全相同的問題。我在bootstrap.min.css中發現了這個問題。您需要更改標籤： label {display:inline-block;}至label {display:block;}

來源

2016-04-22 15:32:59

只需將style="text-align: left"添加到您的標籤。

來源

2017-05-03 15:19:25

如何將這些Bootstrap表單項對齊？

回答

相關問題