Question

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

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

例如：style="margin-left:200px;"添加到<span>会有效，但是当我添加更多具有不同名称的面板时，会有另一个px用于该边距...

的链接

我出错的地方可能就在这里：不确定我是否可以使用<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>

Answer 2

如果你更改了panel-head和btn-group的一些css规则，它就可以工作。

.btn-group{
    position: absolute;
    right: 8px;
    top: 8px;
}

.panel-heading{
    position: relative;
}

http://jsfiddle.net/q8qCW/1/

我建议，不要将这些规则添加到每个panel-head和btn-group ^^。我还将btn-group的大小更改为。

btn-group-xs

如果这样做，这不是一种非常动态的方式，但可以完成工作。其他大小的btn-groups是可能的，但需要不同的顶部和右侧css规则。

Answer 3

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Click me...
</a>
<span class="btn-group col-md-offset-9">
    <button class="btn btn-default">ON</button>
    <button class="btn btn-primary active">OFF</button>
</span>

您好我已将您的代码分叉到js小提琴并添加了一些类和媒体查询（想法），请尝试改进媒体查询。

你可以找到它here

Answer 4

如何使用list-inline ..

<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">
      <ul class="list-inline">
        <li class="col-xs-12">
          <span class="btn-group pull-right"> 
             <button class="btn btn-default">ON</button>
             <button class="btn btn-primary active">OFF</button>
            </span>
           <h4>
             <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
               Click me...
             </a>
          </h4>
        </li>
      </ul> 
    </div>
   </div>
</div>

演示：http://bootply.com/92157

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

4 个答案: