HTML元素（按钮）以较小的屏幕尺寸移动到新行

Question

我有一系列div（包含按钮），这些div在大屏幕尺寸下都在同一行。当我使屏幕越来越小时，最右边的按钮被推到一个新的行而不是与其他按钮保持在同一行。请参阅下面的图片（大屏幕尺寸的pic1，小屏幕尺寸的图片2）

PIC1：

PIC2：

和我的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按钮是内联块，因此给出文本居中css属性将按照我认为你想要的方式对齐它们而不需要编码填充，这是一个问题。

Answer 2

使用

box-sizing:border-box;

在css中 这会在显示时从内部宽度中减去填充和边框。