Question

这就是我的网页目前的样子

这是页面的代码

＆＃13;

        $(document).ready(function () {
            $('body').on('click','input[type="submit"]',function(e) {
                        e.preventDefault();
                        console.log($(this).closest('form'));
                        $(this).closest('form').submit();
                     });
             $('#clone').click(function(e) {
                       e.preventDefault();
                       $('#myform_1').clone(true).prop('id', 'myform_2' ).appendTo('.clone');
                     });
             $('[id^="myform_"]').each(function(key, form) {

                 $(form). validate({ //intit plugin
                    rules: {
                        field1: {
                            required: true
                        },
                        field2: {
                            required: true
                        }
                    },
                    submitHandler: function (form) { 
                        alert('valid form submitted'); 
                        return false; 
                    }
                });
             });
         });

＆＃13;

我想减少Bootstrapgrids之间的宽度/空间。我尝试更改<div class="">  <form class="form-horizontal"> <div class="box-body"> <div class="form-group"> <div class="col-sm-3"></div> <div class="col-sm-2"><label for="inputEmail3" class="control-label pull-left">Old Password</label></div> <div class="col-sm-3"> <input type="password" class="form-control" id="txtOldPassword" onchange="DoACommonJs.HideErrorMessage(this)" placeholder="Old Password" maxlength="20"> <span toggle="#txtOldPassword" class="fa fa-fw fa-eye field-icon toggle-password"></span> <div id="div_txtOldPassword" class="has-error" style="display:none"> <span id="span_txtOldPassword" class="help-block">Old password missing or Incorrect old password.</span> </div> </div> </div> <div class="form-group"> <div class="col-sm-3"></div> <div class="col-sm-2"> <label for="inputEmail" class="control-label pull-left">New Password</label></div> <div class="col-sm-3"> <input type="password" class="form-control" id="txtNewPassword" onchange="DoACommonJs.HideErrorMessage(this)" onblur="DoAProfileJs.CheckPasswordstrength(this)" placeholder="New Password" maxlength="20"> <span toggle="#txtNewPassword" class="fa fa-fw fa-eye field-icon toggle-password"></span> <div id="div_txtNewPassword" class="has-error" style="display:none"> <span id="span_txtNewPassword" class="help-block">New password missing.</span> </div> </div> </div> <div class="form-group"> <div class="col-sm-3"></div> <div class="col-sm-2"> <label for="inputEmail13" class="control-label pull-left">Confirm Password</label></div> <div class="col-sm-3"> <input type="password" class="form-control" id="txtConfirmPassword" onblur="DoAProfileJs.CheckConfirmPassword(this)" onchange="DoACommonJs.HideErrorMessage(this)" placeholder="Confirm Password" maxlength="20"> <span toggle="#txtConfirmPassword" class="fa fa-fw fa-eye field-icon toggle-password"></span> <div id="div_txtConfirmPassword" class="has-error" style="display:none"> <span id="span_txtConfirmPassword" class="help-block">Confirm password missing.</span> </div> </div> </div> </div>  <div class="box-footer"> <a class="btn btn-primary pull-right" id="btnUserPasswordUpdate" href="#" onclick="DoAProfileJs.SaveChangePassword()"> <i class="fa fa-fw fa-save fa-lg"></i>Save</a> </div>  </form> </div>类的宽度，但是将整个类移到左侧。尽管注意到差距的缩小。什么可能是更好的方法？

Answer 1

您需要添加一些自定义css，以根据您的要求进行自定义，如下所示：

.custom-form {  font-size: 13px !important;}
.p-0{ padding: 0px !important; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form class="form-horizontal custom-form">
                    <div class="box-body">
                        <div class="form-group">
                            <div class="col-sm-3"></div>
                            <div class="col-sm-1 p-0"><label for="inputEmail3" class="control-label pull-left">Old Password</label></div>
                            <div class="col-sm-3">
                                <input type="password" class="form-control" id="txtOldPassword" onchange="DoACommonJs.HideErrorMessage(this)" placeholder="Old Password" maxlength="20">
                                <span toggle="#txtOldPassword" class="fa fa-fw fa-eye field-icon toggle-password"></span>
    
    
                                <div id="div_txtOldPassword" class="has-error" style="display:none">
                                    <span id="span_txtOldPassword" class="help-block">Old password missing or Incorrect old password.</span>
    
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3"></div>
                            <div class="col-sm-1 p-0">
                                <label for="inputEmail" class="control-label pull-left">New Password</label></div>
                                <div class="col-sm-3">
                                    <input type="password" class="form-control" id="txtNewPassword" onchange="DoACommonJs.HideErrorMessage(this)" onblur="DoAProfileJs.CheckPasswordstrength(this)" placeholder="New Password" maxlength="20">
                                    <span toggle="#txtNewPassword" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                    <div id="div_txtNewPassword" class="has-error" style="display:none">
                                        <span id="span_txtNewPassword" class="help-block">New password missing.</span>
                                    </div>
                                </div>
    
                            </div>
                        <div class="form-group">
                            <div class="col-sm-3"></div>
                            <div class="col-sm-1 p-0">
                                <label for="inputEmail13" class="control-label pull-left">Confirm Password</label></div>
                                <div class="col-sm-3">
                                    <input type="password" class="form-control" id="txtConfirmPassword" onblur="DoAProfileJs.CheckConfirmPassword(this)" onchange="DoACommonJs.HideErrorMessage(this)" placeholder="Confirm Password" maxlength="20">
                                    <span toggle="#txtConfirmPassword" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                    <div id="div_txtConfirmPassword" class="has-error" style="display:none">
                                        <span id="span_txtConfirmPassword" class="help-block">Confirm password missing.</span>
                                    </div>
                                </div>
    
                            </div>
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer">
                        <a class="btn btn-primary pull-right" id="btnUserPasswordUpdate" href="#" onclick="DoAProfileJs.SaveChangePassword()"> <i class="fa fa-fw fa-save fa-lg"></i>Save</a>
                    </div>
                    <!-- /.box-footer -->
                </form>

如何减少Bootstrap网格之间的宽度

1 个答案: