如何在引導程序中的復選框組旁邊正確對齊按鈕？

Question

我有以下html代碼：

<div class="container">
<form name ="queryForm">

<div class="form-group">
    <p class="checkbox-inline">
        <input type="checkbox" name="optionsRadios" id="checkOne" value="one">
        One
    </p>
    <p class="checkbox-inline">
        <input type="checkbox" name="optionsRadios" id="checkTwo" value="two">
        Two
    </p>
    <p class="checkbox-inline">
        <input type="checkbox" name="optionsRadios" id="checkThree" value="three">
        Three
    </p>
    <p class="checkbox-inline">
        <input type="checkbox" name="optionsOther" id="checkFour" value="four">
        Four
    </p>
</div>

<button type="submit" class="btn btn-fill btn-info">Reload</button>
</form>

</div>

此代碼的結果如下面的屏幕所示：

我想移動復選框旁邊的Reload按鈕。 首先我想在最后一個復選框之后移動<button... ，所以代碼會像這樣結束：

四

<button type="submit" class="btn btn-fill btn-info">Reload</button> </div>

但結果是：

我寧願讓它垂直居中，更像是：

你能給我一個提示，我可以在我的代碼中修改什么來達到這樣的效果嗎？

Answer 1

bootstrap .btn 類是 inline-block，所以只需將按鈕移動到 .form-group div 中最后一個 .checkbox-inline 段落之后。

<div class="container">
 <form name ="queryForm">
  <div class="form-group">
   <p class="checkbox-inline">
    <input type="checkbox" name="optionsRadios" id="checkOne" value="one">
    One
   </p>
   <p class="checkbox-inline">
    <input type="checkbox" name="optionsRadios" id="checkTwo" value="two">
    Two
   </p>
   <p class="checkbox-inline">
    <input type="checkbox" name="optionsRadios" id="checkThree" value="three">
    Three
   </p>
   <p class="checkbox-inline">
    <input type="checkbox" name="optionsOther" id="checkFour" value="four">
    Four
   </p>
   <button type="submit" class="btn btn-fill btn-info">Reload</button>
  </div>
 </form>
</div>

Answer 2

通過使用"pull-left"類來浮動表單組 div 和按鈕，您可以實現這一點。 此外，根據您的設計調整您喜歡的邊距樣式。

<div class="container">
<form name ="queryForm clearfix">

<div class="form-group pull-left" style="margin:6px 10px 0 0">
    ....
</div>

<button type="submit" class="btn btn-fill btn-info pull-left">Reload</button>
</form>

</div>

http://codepen.io/partypete25/full/LNJyWV/

Answer 3

要使標簽垂直居中於按鈕大小，您可以將“p”元素的行高設置為與按鈕相同的高度。 假設按鈕的高度為 24px：

//css to affect the `<p>` elements with the class of "checkbox-inline"

.checkbox-inline{display:inline; line-height:24px}

Answer 4

將 valign="middle" 應用於按鈕。 所以：

CSS：

button {
    valign: middle;
}

或者

HTML：

<button style="valign: middle;">text</button>

Answer 5

用這樣的跨度替換你的第二個 div：

<div class="container">
<form name ="queryForm">

<span class="form-group">
    <p class="checkbox-inline">
        <input type="checkbox" name="optionsRadios" id="checkOne" value="one">
        One
    </p>
    <p class="checkbox-inline">
        <input type="checkbox" name="optionsRadios" id="checkTwo" value="two">
        Two
    </p>
    <p class="checkbox-inline">
        <input type="checkbox" name="optionsRadios" id="checkThree" value="three">
        Three
    </p>
    <p class="checkbox-inline">
        <input type="checkbox" name="optionsOther" id="checkFour" value="four">
        Four
    </p>
</span>

<button type="submit" class="btn btn-fill btn-info">Reload</button>
</form>

</div>

Answer 6

您需要設置表單.form-inline ，並且不需要.form-group復選框，請參閱內聯表單的引導程序文檔： http : //getbootstrap.com/css/#forms-inline

<div class="container">
  <form name="queryForm" class="form-inline">
    <p class="checkbox">
        <input name="optionsRadios" id="checkOne" value="one" type="checkbox">
        One
    </p>
    <p class="checkbox">
        <input name="optionsRadios" id="checkTwo" value="two" type="checkbox">
        Two
    </p>
    <p class="checkbox">
        <input name="optionsRadios" id="checkThree" value="three" type="checkbox">
        Three
    </p>
    <p class="checkbox">
       <input name="optionsOther" id="checkFour" value="four" type="checkbox">
       Four
    </p>
    <button type="submit" class="btn btn-fill btn-info">Reload</button>
  </form>
</div>

看到這個引導： http : //www.bootply.com/5mffSWq7um

這樣你就可以使用標准的引導方式，沒有自定義 css，沒有不必要的 html。