如何在bootstrap中使用精确的列宽进行输入

Question

为什么我的电子邮件输入在bootstrap列中没有占据全宽 我正在使用bootstrap并使用visual studio项目的默认基本布局打开此html页面

   <div class="container">


        <div class="row">
            <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
                <form role="form">
                    <hr>
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="form-group">
                                <input type="text" name="UserFirstName" id="UserFirstName" class="form-control input-lg" placeholder="First Name" tabindex="1" required autocomplete="on">
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="form-group">
                                <input type="text" name="UserLastName" id="UserLastName" class="form-control input-lg" placeholder="Last Name" tabindex="2" required autocomplete="on">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="form-group">
                                <input type="text" name="MobileNumber" id="MobileNumber" class="form-control input-lg " placeholder="Mobile # (92)321-2255434" tabindex="3" required autocomplete="on" data-mask="(99)-999-9999999">
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="form-group">
                                <input type="text" name="BusinessName" id="BusinessName" class="form-control input-lg" placeholder="Business Name" tabindex="4" required autocomplete="on">
                            </div>
                        </div>
                    </div>
                    <div class="row">

                        <div class="col-xs-12 col-sm-12 col-md-12">

                            <div class="form-group ">
                                <input type="email" name="Email" id="Email" class="form-control input-lg" placeholder="Valid Email Address (For Varification)" tabindex="5" required autocomplete="on">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="form-group">
                                <input type="password" name="password" id="Password" class="form-control input-lg" placeholder="Password" tabindex="6" required autocomplete="off">
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="form-group">
                                <input type="password" name="ConfirmPassword" id="ConfirmPassword" class="form-control input-lg" placeholder="Confirm Password" tabindex="7" required autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <hr>

                    <div class="row">



                        <div class="col-xs-12 col-md-6">

                            <input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7">

                        </div>


                        <div class="col-xs-12 col-md-6"><a href="#" class="btn btn-success btn-block btn-lg">Sign In</a></div>
                    </div>
                    <div class="row">
                        @Html.ValidationSummary("", new { @class = "text-danger" })
                    </div>
                </form>
            </div>
        </div>

    </div>

为了您的方便我也附上了图片文件，如果有人可以帮我解决