Css 具有固定列宽的引导窗体

我有一个内联表单，其中包含以下代码：

<div class="card" style="width:100%;">
<div class="card-block">
    <form class="form-inline">
        <div class="row">
            <div class="form-group col-xs-2">
                <label for="displayName">Display Name</label>
                <input class="form-control" ng-model="displayName" style="height:30px;" id="displayName">
            </div>
            <div class="form-group col-xs-2">
                <label for="officeEmail">Office Email</label>
                <input class="form-control" ng-model="officeEmail" style="height:30px;" id="officeEmail">
            </div>
        </div>
    </form>
   </div>  
</div>

显示名称
办公室电子邮件

当我运行它时，它看起来像这样：

当我调整浏览器的大小时，它是这样的：

我的问题是如何使输入字段具有固定的宽度和列之间的固定距离

谢谢

显示名称
办公室电子邮件

无论是谁投票否决了我的问题，请解释原因。似乎是。将尝试更新您的答案状态。谢西特工作得很近。但当我让浏览器变小时，字段的宽度也会变小。要使文本框大小相同，还是可以根据浏览器窗口大小进行更改？如果是，则您必须为文本框大小编写媒体查询，当您调整浏览器大小时，文本框大小会不断变化。我希望将文本框保持为其原始大小。然后您可以将css设置为

宽度：100%！重要信息

至文本框。