引导面板标题 - 右对齐控件

Question

I have few controls in bootstrap panel title section and I want them to display on the right side. I used "pull-right" css class to align the controls on right but, the panel title is losing it's height. This behavior is observed in IE8 and above as well as chrome.

Current Status:

Fiddler: https://jsfiddle.net/99x50s2s/156/

Code:

<div id="DataRow" class="col-md-12">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">
                <div class="pull-right">
                    <a class="btn btn-warning btn-xs" data-toggle="collapse" data-parent="#DataRow" href="#CollapseData" aria-expanded="true" aria-controls="CollapseData">
                    <span class="glyphicon glyphicon-collapse-down"></span>
                </a>
                Data               

                <button class="btn btn-danger btn-xs disabled" id="DownloadBtn" type="button" title="Download all data"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>&nbspDownload</button>
                </div>                
            </h3>

        </div>
        <div id="CollapseData" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <div class="form-inline col-sm-12 move-down-sm">
                    Controls will be displayed here
                </div>
                <div class="form-horizontal col-sm-12 move-down-sm">
                    Controls will be displayed here
                </div>
                <div class="form-inline col-sm-12 move-down-sm">
                    Controls will be displayed here
                </div>                    
            </div>
            <div class="panel-footer">
                <button class="btn btn-success btn-xs" id="SaveChangesBtn" type="button" title="Save the changes"><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>&nbspSave Changes</button>
            </div>
        </div>
    </div>
</div>

Expectation:

Answer 1

What you need is to create a new block formatting context around the floated items. This can be done in several ways . I've done so in this fork of your demo using overflow: hidden : https://jsfiddle.net/r30ebnfs/

Another acceptable method is using the following:

.panel-title {
    display:inline-block;
    vertical-align: top;
    width: 100%;
} 

https://jsfiddle.net/r30ebnfs/1/

EDIT:

Yet another method is to not float at all and use bootstrap styles (using text-right ):

<h3 class="panel-title text-right">
    <div class="">
        <a class="btn btn-warning btn-xs" data-toggle="collapse" data-parent="#DataRow" href="#CollapseData" aria-expanded="true" aria-controls="CollapseData">
            <span class="glyphicon glyphicon-collapse-down"></span>
        </a>
        Data               

        <button class="btn btn-danger btn-xs disabled" id="DownloadBtn" type="button" title="Download all data"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>&nbspDownload</button>
    </div>                
</h3>

https://jsfiddle.net/r30ebnfs/3/

Answer 2

Elements normally get their height based on the content inside them. Floating elements don't normally contribute to that height, so if an element has floating child elements, it's content height will drop to zero if those are the only nested elements.

There are two ways to fix this behavior, both involve clearing the float.

<div id="someContainerWithFloatingChildren">
  <div class="floatingLeft"></div> <!-- or right, or both, doesn't matter-->
  <div class="clear"></div> <!-- empty element that clears the float -->
</div>

.clear {
    clear: both;
}

Or you can use a clearfix, a class that uses pseudo elements to accomplish what this clearing div is doing without polluting your markup with empty elements. I like this way better: https://jsfiddle.net/99x50s2s/157/

More on clearfix: https://css-tricks.com/snippets/css/clear-fix/