HTML 元素(按钮)在较小的屏幕尺寸下移动到新行

Question

我有一系列 div(包含按钮)，它们在大屏幕尺寸下都位于同一行。随着屏幕越来越小，最右边的按钮被推到新的一行，而不是与其他按钮保持在同一行。见下图(大屏图1，小屏图2)

图一:

图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>

Answer 1

填充正在占用您的空间。

代替:

align="center" style="padding-left: 110px"

尝试:

style="text-align: center"

Bootstrap 按钮默认是行内 block ，所以给文本居中的 css 属性将按照我认为你想要的方式对齐它们，而没有硬编码填充，这是这里的问题。