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类是内联块，所以只需在最终的.checkbox-inline段落之后将按钮移动到.form-group div中。

<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 =＆＃34;中＆＃34;按钮。所以：

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>

请参阅此bootply：http://www.bootply.com/5mffSWq7um

这样你就可以采用标准的bootstrap方式，没有自定义的CSS，也没有不必要的html。

如何在引导程序中的复选框组旁边正确对齐按钮？

6 个答案: