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

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

孩子的名字
弗斯特
医疗保险
最后

您的代码错误，请再次检查。您在结束其他标记之前结束

。再次阅读如何使用引导表单

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

`

孩子的名字
弗斯特
医疗保险
最后
需要孩子的名字
提交
`

您是否尝试修改CSS定义？没有人会为您编写代码。请尝试删除所有列xs类检查您的结束标记

和

标记，因为您遗漏了其中一些标记。我试图编辑它们，但在IDE中，当您正确关闭每个标记时，应该更容易注意到。

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

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