css - 具有固定列宽的 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

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

这是否与您正在寻找的相同？

希望这对您有所帮助。