如何在引导程序面板标题中设置内联复选框

Question

如何将此引导程序复选框设置为与面板标题位于同一行？

<div class="panel panel-info">
    <div class="panel-heading">some heading
        <div class="checkbox">
            <label>
                <input type="checkbox"> check me
            </label>
        </div>
    </div>
</div>       
<div class="panel-body">
</div>

这是小提琴http://jsfiddle.net/Rr7qf/

Answer 1

正如rnirnber所提到的，默认情况下div是ablock元素。您可以覆盖此行为。这应该可以解决问题：

<div class="checkbox" style="display: inline">

更新

<div class="panel panel-info">
   <div class="panel-heading">Panel Heading
      <div class="checkbox" style="display:inline">
         <label>
             <input type="checkbox" style="float:inherit;"/>check box
         </label>
      </div>
  </div>
</div>       
<div class="panel-body">
</div>

Answer 2

您的复选框位于新行上，因为它包含在自己的<div>标记中。 按照惯例，<div>元素具有默认的display：block属性。

块元素在各自的路线上，故事结束。 你应该看看花车或者可能（甚至更容易）只是摆脱不必要的div。