html - 我如何使用 CSS 在 bootstrap 3 面板标题旁边排列一组按钮？

Question

我正在尝试学习一些 bootstrap 3，并且我正在尝试将一组两个按钮添加到那些 Collapse-Accordion's 的面板标题中. 我希望能够将面板的标题排在左侧，btn-group排在右边。

我尝试添加 pull-left标题，pull-right对于按钮组，但这不会产生漂亮的东西......

添加例如:style="margin-left:200px;"到 <span> , 会工作，但是当我添加更多具有不同名称的面板时，该边距将有另一个像素数......

这是我的 JSfiddle. 的链接

我出错的地方可能是这里:不确定我是否可以使用 <span>在 <h4> 内，为了我的这个目的？

<div class="panel-heading">
  <h4 class="panel-title">
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
           Click me...
     </a>
     <span class="btn-group"> 
        <button class="btn btn-default">ON</button>
        <button class="btn btn-primary active">OFF</button>
    </span>
  </h4>
 </div>

Answer 1

请尝试下面的代码，这里是fiddle

        <div class="panel-heading">

                    <h4 class="panel-title">
                       <div class="row">
                         <div class="col-md-12">
                           <div class="col-md-6">
                        <a data-toggle="collapse" data-parent="#accordion"        href="#collapseOne">Click me...
                        </a>
                           </div>
                       <div class="col-md-6 text-right">
                       <span class="btn-group"> 
                            <button class="btn btn-default">ON</button>
                            <button class="btn btn-primary active">OFF</button>
                        </span>
                           </div>
                        </div>
                        </div>
                    </h4>  

                </div>