减少输入宽度（使用引导程序）

Question

我正在尝试减少中间名输入字段，但我无法让它工作。它只适用于xs屏幕（下图）。

<div class="row">            
    <form class="form-inline" role="form" name="userForm" novalidate>
        <div class="form-group required">
            <label for="first" class="control-label">Child's Name</label>
                <div class="input-group">
                    <span class="col-xs-9 col-sm-5"> 
                        <input  type="text" class="form-control" id='first' name="first" >
                        <label for ="first">First </label>
                    </span>
                </div>

                <div class="input-group">
                    <span class="col-xs-3 col-sm-2">
                        <input type="text" class="form-control col-xs-3 col-sm-2"  id='mi' name="mi" >
                        <label for ="mi">MI</label>
                    </span>
                </div>

                <div class="input-group">
                    <span class="col-xs-9 col-sm-5">
                        <input type="text" class="form-control" id = "last" name="last" >
                        <label for="last"> Last </label>
                    </span>
                </div>
            </div>
        </form>            
</div>

Answer 1

您的代码错误，请再次检查。在结束其他代码之前结束</form>。并再次阅读如何使用bootstrap表单。 help this link

Answer 2

删除span并将col-sm-4添加到div

`

            <div class="form-group required">
                <label for="first" class="control-label">Child's Name</label>
                <div class="input-group col-sm-4">
                    <input type="text" class="form-control" id='first' name="first">
                    <label for="first">First </label>
                </div>

                <div class="input-group col-sm-1">
                    <input type="text" class="form-control " id='mi' name="mi">
                    <label for="mi">MI</label>
                </div>
                <div class="input-group col-sm-4">

                    <input type="text" class="form-control " id="last" name="last">
                    <label for="last"> Last </label>

                </div>
                <div class="help-block" ng-messages="userForm.first.$error" style="color:maroon" role="alert">
                    <p ng-message="required">Child's First Name is required.</p>
                </div>

            </div>


            <div class="form-group">
                <button type="submit" class="btn btn-danger">Submit</button>
            </div>

        </form>`