具有固定列宽的Bootstrap表单

Question

我有一个带有以下代码的内联表单：

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

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

当我调整浏览器大小时，它看起来像这样：

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

由于

Answer 1

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
<div class="row">

<div class="card" style="width:100%;">
<div class="card-block">

    <form class="form-inline">
        <div class="row">
            <div class=" col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <label for="displayName">Display Name</label>
                <input class="form-control" ng-model="displayName" style="height:30px;" id="displayName">
            </div>
            <div class=" col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <label for="officeEmail">Office Email</label>
                <input class="form-control" ng-model="officeEmail" style="height:30px;" id="officeEmail">
            </div>
        </div>
    </form>
   
</div>
</div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这与您正在寻找的相同吗？

希望这有帮助。