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

Question

I'm trying to learn some bootstrap 3, and i'm trying to add a group of two buttons to a panel heading for those Collapse-Accordion's . I want to be able to line the title of the panel to the left, and the btn-group lined to the right.

I have tried to add pull-left for the title, and pull-right for the button group, but this will not result in something pretty...

Adding for example: style="margin-left:200px;" to the <span> , will work, but when i add more panels, with different names, there will be another number of px for that margin...

Here is a link to my JSfiddle.

Where i go wrong is probably somewhere here: Not sure if i can use the <span> within the <h4> , and for this purpose of mine?

<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

pls try the below code, and here is the 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

if you change some of the css rules for the panel-head and btn-group it work.

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

.panel-heading{
    position: relative;
}

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

I would suggest, not to add these rules to every panel-head and btn-group ^^. I also change the size of the btn-group to.

btn-group-xs

It is not a very dynamic way if doing it, but gets the job done. Other sizes of btn-groups are possible, but require different top and right css rules.

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>

Hi i have forked your code to js fiddle and added some class and media queries(for idea), please try to improve media queries as well.

you can find it here

Answer 4

How about using a 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>

Demo: http://bootply.com/92157