我有一系列 div(包含按钮),它们在大屏幕尺寸下都位于同一行。随着屏幕越来越小,最右边的按钮被推到新的一行,而不是与其他按钮保持在同一行。见下图(大屏图1,小屏图2)
和我的 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>
最佳答案
填充正在占用您的空间。
代替:
align="center" style="padding-left: 110px"
尝试:
style="text-align: center"
Bootstrap 按钮默认是行内 block ,所以给文本居中的 css 属性将按照我认为你想要的方式对齐它们,而没有硬编码填充,这是这里的问题。
关于HTML 元素(按钮)在较小的屏幕尺寸下移动到新行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36632759/