Reputation: 5461
I have a series of divs (which contain buttons) that are all on the same line at large screen sizes. As I make the screen smaller and smaller, the right most button gets pushed to a new line instead of staying on the same line as the other buttons. See pictures below (pic1 of large screen size, pic2 of small screen size)
and my html:
<div class="col-xs-12 clearfix">
<div class="col-xs-4" style="padding-left: 290px">
<button class="btn btn-default" ng-click="createProject()">New
Project</button>
</div>
<div class="col-xs-4" align="center"
ng-controller="CsvImportController"
style="display: inline-block; padding-left: 200px">
<a href="#" class="btn btn-default btn-file"
onclick="document.getElementById('fileBrowser').click(); return false;">
Select CSV File </a>
<input id="fileBrowser" style="visibility: hidden;"
class="btn btn-default btn-file" type="file" file-input="files" />
</div>
<div class="col-xs-4" align="center" style="padding-left: 110px">
<a class="btn btn-default" href="projects.html#/projects">Browse
Projects</a>
</div>
</div>
Upvotes: 0
Views: 2206
Reputation: 603
use
box-sizing:border-box;
in css This subtracts the padding and the border from the inner width when showing.
Upvotes: 1
Reputation: 1057
Padding is consuming your space.
Instead of:
align="center" style="padding-left: 110px"
Try:
style="text-align: center"
Bootstrap buttons are inline-blocks by default, so giving text centering css property will align them as I think you want without harcoded padding which is problem here.
Upvotes: 1