Menu
I am trying to get a single button positioned above a list, but with the button to the right.
When I add the pull-right class to the button (or a containing div) the button is then overlapped by the list.
<div>
<div class="pull-right">
<button type="button" class="btn btn-default">Add</button>
</div>
<ul class="list-group">
<li class="list-group-item">Something something 1</li>
<li class="list-group-item">Something something 2</li>
<li class="list-group-item">Something something 2</li>
</ul>
</div>
jsfiddle: http://jsfiddle.net/paulbau/384YH/
504
bootstrap's affix method is easy. 1)Add data-spy=”affix” to the div you would like to fix in the right side. Also Add a class to the div, in the example i added the class as my-affix-div.
This could happen for several reasons, especially when you consider the position problems with divs from one website to another. Similarly, box elements may overlap for a few reasons, ranging from positioning errors to overflow issues and simple float problems.
The reason for the overlapping lines is quite simple: The line height is not sufficient to contain the text size. You have "hard-coded" the font-size via inline CSS but did not adjust the line-height , for instance.
You should add the pull-right class to the button element instead and then add a clearfix to the parent element. In doing so, the div won't collapse upon itself.
Updated Example
<div class="clearfix">
<button type="button" class="btn btn-default pull-right">Add</button>
</div>
Alternatively, since the button is an inline-block level element, you could avoid floating it and use text-align:right instead. Just add the class text-right to the parent. You no longer need the clearfix because the button element isn't being removed from the document flow.
Example Here
<div class="text-right">
<button type="button" class="btn btn-default">Add</button>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
