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

我有一系列的div（包含按钮），它们都在同一行的大屏幕上。随着屏幕越来越小，最右边的按钮被推到一个新的行，而不是像其他按钮一样保持在同一行。见下图（大屏幕尺寸的pic1，小屏幕尺寸的pic2）

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

尝试：

---

默认情况下，引导按钮是内联块，因此，如果提供文本居中css属性，则可以在不使用harcoded填充的情况下将它们对齐，这是一个问题。

填充会占用您的空间

而不是：

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

尝试：

默认情况下，引导按钮是内联块，因此，如果提供文本居中css属性，则可以在不使用harcoded填充的情况下将它们对齐，这是这里的问题。

使用

box-sizing:border-box;

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

使用

box-sizing:border-box;

在css中

---

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

还包括“新建项目/选择CSV&浏览项目”按钮的代码。是。请包括该项目的代码buttons@andre3wappritesh，很抱歉复制了错误的代码段，后期更新包括“新建项目/选择CSV&浏览项目”按钮的代码。是的。请包括该项目的代码buttons@andre3wappritesh，很抱歉复制了错误的代码片段，post updated