Bootstrap对齐标题<h3>旁边的复选框<input />

Question

我尝试垂直对齐自举复选框＆amp;带有标题元素的标签。我也想要复选框＆amp;标签位于共享网格行的最右侧。

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/

结果：

我希望那里有一个干净的＆amp;这样做的反应方式，除了黑客边缘/填充修复。

谢谢！

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关闭标签是否丢失。查找代码中的相同错误可能是此错误仅在发布问题期间。 /

Answer 2

我是Bootstrap的新手，所以我认为有一些我忽略的课程，但不要猜测 - 归结为硬编码的边距修复，这是我最初做的。