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

【问题标题】：How to set inline check box in a bootstrap panel header如何在引导面板标题中设置内联复选框
【发布时间】：2014-05-19 21:18:02
【问题描述】：

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

<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/

【问题讨论】：

标签： css twitter-bootstrap checkbox panel

【解决方案1】：

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

<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>

【讨论】：

看fiddle，它只是bootstrap css
我看到了。如果您删除 CSS 并从上面添加样式，则内联是正确的。似乎有填充/边距/绝对位置或其他东西 - 不知道，但它导致了问题。
见我上面的更新。只需覆盖引导 CSS。使用浏览器的开发者工具 (F12) 进行微调。
我刚刚发现我也可以使用引导类“checkbox-inline”来解决问题。但是您的解决方案也很有效。

【解决方案2】：

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

块元素各行其道，故事结束。您应该研究浮点数，或者可能（甚至更容易）摆脱不必要的 div。

【讨论】：