Bootstrap 对齐 Header 旁边的复选框 <input> <h3>

Question

我正在尝试将 bootstrap 复选框和标签与 header 元素垂直对齐。我还希望复选框和标签位于共享网格行的最右侧。

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-4">
        <div class="form-inline">
             <h3>Chat Room</h3>

            <label class="checkbox-inline">
                <input type="checkbox" checked> <small>enable presence events</small>
            </label>
        </div>
    </div>
</div>

CSS:

.form-inline h3 {
    display: inline-block;
}

label.checkbox-inline {
    float: right;
}

https://jsfiddle.net/zenwoof/7e1f47rz/7/

结果：

我希望有一种干净且响应迅速的方式来执行此操作，而不是 hacky margin/padding 修复。

谢谢！

Answer 1

你可以试试这个，使用相同的 css 风格：

<div class="container">
  <div class="row">

    <div class=col-md-12">
        <div class="form-inline">
             <h3>Chat Room</h3>
        </div>
     </div>

     <div class="col-md-12" >
                <label class="checkbox-inline">
                <input type="checkbox" checked>       <small>enable presence events</small>
            </label>
     </div>

    </div>
</div>

/注意：请仔细检查一下 div 结束标记是 missing.chack 代码中的相同错误可能是此错误仅在发布过程中出现问题。/

Answer 2

我是 Bootstrap 的新手，所以我想有一些 class 我忽略了，但我猜不是 - 归结为我最初所做的硬编码边距修复.

Bootstrap 对齐 Header 旁边的复选框 <input> <h3>

Bootstrap Align Checkbox <input> next to Header <h3>

checkbox

inline

header

twitter-bootstrap-3