如何使用引導程序將復選框與文本輸入表單控件緊密對齊？

Question

我正在嘗試將復選框與文本輸入對齊。 我希望文本框是一個窗體控件，以便它與頁面上的其他輸入正確對齊。 但是，如果我這樣做，它將成為一個塊元素，並且該復選框后會有一個換行符。 如果我不使用表單控件類，則輸入框不夠寬，與表單的其余部分相比，它看起來不正確。 如果使用網格布局，則復選框和文本框之間的空間太大。

下圖表示以下代碼：

<div>
    <input type="checkbox" />
    <input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
</div>

Answer 1

您可以使用內聯表格或水平表格

• 內聯形式http://getbootstrap.com/css/#forms-inline

• 水平形式http://getbootstrap.com/css/#forms-horizo​​ntal

要么

您必須在輸入控件中添加“ display：inline-block”

Answer 2

您可以將“ 輸入組附加組件”用於復選框/收音機。 如果輸入組框不適用於您的特定表單設置，則可以始終設置其樣式。

請參見示例代碼段。

 body { padding-top: 50px; } .input-group-addon.my-addon { background: white; padding-top: 10px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="well">Default</div> <div class="container"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox" aria-label="..."> </span> <input type="text" class="form-control" aria-label="..."> </div> </div> <hr> <div class="well">Added Styling</div> <div class="container"> <div class="input-group"> <span class="input-group-addon my-addon"> <input type="checkbox" aria-label="..."> </span> <input type="text" class="form-control" aria-label="..."> </div> </div> 

Answer 3

像form-inline和form-group這樣的簡單類可以幫助您解決此問題。

<div class="form-inline">
    <div class="form-group">
        <input type="checkbox"/>
        <input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
    </div>
</div>

小提琴： http : //jsfiddle.net/2yao3x5r/

但是，從引導文檔

這僅適用於視口內寬度至少為768px的表單

此外，我有一個建議，如果您的復選框屬於您的輸入，則可以使用input-group

<div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox" aria-label="...">
  </span>
  <input type="text" class="form-control" aria-label="...">
</div>

如果您的視口小於.row ，則建議使用.row和.col修飾符。 例如

<div class="row">
    <div class="col-xs-2 col-sm-2">
        <input type="checkbox"/>
    </div>
    <div class="col-xs-10 col-sm-10">
        <input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
    </div>
</div>

Answer 4

您可以使用input-group-addon並將復選框設置為輸入標簽的樣式。

為了獲得更精確的控件，但不那么簡潔，您可以在控件本身中添加一些CSS：

#inputText {
      margin-left: 20px;
}
#inputCheckbox {
    position: absolute;
    top: 0px;
    margin-top: 0px;
}

HTML（帶有網格系統）：

<div class="col-md-2">XX</div>
<div class="col-md-8">
    <input type="text" placeholder="Enter your own vendor name here ..."
       class="form-control" id="inputText" />
    <input type="checkbox" class="pull-left" id="inputCheckbox" />
</div>
<div class="col-md-2">XX</div>