我有一个使用模态的表单。似乎在任何浏览器上，当我点击图标（上传链接）时，模式会弹出，然后页面会向左缩小一点。
此处的实例：http://dev.handyvet.org/VetProsDevSite/_MASTER/views/vetpro%20users/vet_pro_registration_1.html
为什么会这样？
这是我的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>VetPro Registration</title>
<!-- Style Css-->
<link rel="stylesheet" href="../../assets/css/styles.css">
<link rel="stylesheet" href="../../assets/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="../../vendor/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css">
<!-- jQuery -->
<script type="text/javascript" src="../../vendor/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../vendor/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../vendor/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
</head>
<body class="split-background">
<!-- Start Header -->
<header>
<div class="logo">
<div class="text-center">
<a href="../static pages/home.html"><img src="../../assets/images/Center-Logo.png"></a>
</div>
</div>
</header>
<!-- End Header -->
<!-- Start Body -->
<h3 class="page-header">New VetPro Registration</h3>
<div class="container-fluid" id="vetpro-registration">
<form accept-charset="UTF-8" name="form" role="form">
<div class="col-md-offset-1" id="personal_info">
<h4 class="text-left col-md-6 buffer">
Personal Information (1 of 4)
</h4>
<div class="col-md-11">
<div class="form-horizontal">
<div class="col-md-3">
<div class="form-group">
<label for="first_name"><span class="red"> * </span>Full Name</label>
<div class="col-md-12 pull-right">
<input class="form-control"
id="first_name"
name="first_name"
type="text"
placeholder="John Doe"
required />
</div>
</div>
<div class="form-group">
<label for="full_address"><span class="red"> * </span>Address</label>
<div class="col-md-12 pull-right">
<input class="form-control"
id="full_address"
name="full_address"
type="text"
placeholder="123 Example St, Town, Oregon 97000"
autocomplete="on"
onFocus="geolocate()"
required />
</div>
</div>
<div class="form-group">
<label for="address_2">Apt/Suite #</label>
<div class="col-md-12 pull-right">
<input class="form-control"
id="address_2"
name="address_2"
type="text"
placeholder="AP #104"
autocomplete="on"
required />
</div>
</div>
<div class="form-group">
<label for="phone"><span class="red"> * </span>Phone</label>
<div class="col-md-12 pull-right">
<input class="form-control"
id="phone"
name="phone"
type="text"
placeholder="(123) 345-1234"
required />
</div>
</div>
<div class="form-group">
<label for="email"><span class="red"> * </span>Email</label>
<div class="col-md-12 pull-right">
<input class="form-control"
id="email"
name="email"
type="text"
placeholder="example@example.com"
required />
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="service_branch"><span class="red"> * </span>Service Branch</label>
<div class="col-md-12 pull-right">
<select class="form-control"
name="service_branch"
id="service_branch"
required>
<option value="AF">Air Force</option>
<option value="AR">Army</option>
<option value="MR">Marines</option>
<option value="NV">Navy</option>
<option value="CG">Coast Guard</option>
</select>
</div>
</div>
<div class="form-group">
<label for="hat_size"><span class="red"> * </span>Hat Size</label>
<div class="col-md-12 pull-right">
<select class="form-control"
name="hat_size"
id="hat_size"
required>
<option value="Small">S</option>
<option value="Medium">M</option>
<option value="Large">L</option>
<option value="Extra Large">XL</option>
<option value="Extra Extra Large">XXL</option>
</select>
</div>
</div>
<div class="form-group">
<label for="shirt_size"><span class="red"> * </span>Shirt Size</label>
<div class="col-md-12 pull-right">
<select class="form-control"
name="shirt_size"
id="shirt_size"
required>
<option value="Small">S</option>
<option value="Medium">M</option>
<option value="Large">L</option>
<option value="Extra Large">XL</option>
<option value="Extra Extra Large">XXL</option>
</select>
</div>
</div>
<div class="form-group">
<label for="dob"><span class="red"> * </span>Date of Birth</label>
<div class="col-md-12 pull-right">
<input class="form-control"
data-provide="datepicker"
id="dob"
name="dob"
type="text"
placeholder="01/01/1980"
required />
</div>
</div>
<div class="form-group">
<label for="service_radius"><span class="red"> * </span>Service Radius</label>
<div class="col-md-12 pull-right">
<select class="form-control"
name="state"
id="state"
required>
<option value="5">5 miles</option>
<option value="10">10 miles</option>
<option value="15">15 miles</option>
<option value="20">20 miles</option>
<option value="25">25 miles</option>
<option value="30">30 miles</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="bio"><span class="red"> * </span>Biography</label>
<textarea class="form-control"
id="bio"
name="bio"
required /></textarea>
</div>
</div>
<div class="text-center">
<div class="col-md-3">
<div class="form-group">
<label for="avatar"><span class="red"> * </span>Avatar</label>
<br>
<a href="#" data-toggle="modal" data-target="#avatar_upload">
<img src="../../assets/images/NewVetProRegisterAvatar.jpg" class="avatar-upload">
<p>Upload Image</p>
</a>
</div>
</div>
<div id="avatar_upload" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Important!</h4>
</div>
<div class="modal-body">
<p>Please be certain that your avatar photo is a "headshot" only! Do not include other people, your pets or a full body shot. Your image should be clear, recent, casual (no military uniform) & cropped from just above your head to just below your shoulders.</p>
</div>
<div class="modal-footer">
<input id="image"
name="image"
class="col-md-offset-4"
type="file" />
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="dd_214"><span class="red"> * </span>DD-214</label>
<br>
<a href="#" data-toggle="modal" data-target="#document_upload">
<img src="../../assets/images/DocumentIcon.jpg" class="document-upload">
<p>Upload Document</p>
</a>
</div>
</div>
<div id="document_upload" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Important!</h4>
</div>
<div class="modal-body">
<p>As proof of time served, please upload a digital copy of your DD-214. If you have a physical copy, simply capture a clear photo with your smart-phone and upload the image. If lost, a new copy can be obtained from http://www.dd214.com.</p>
</div>
<div class="modal-footer">
<input id="document"
name="document"
class="col-md-offset-4"
type="file" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 text-center">
<a href="../static pages/home.html" type="button" class="btn btn-save">Save / Continue Later</a>
<a href="vet_pro_registration_2.html" type="button" class="btn btn-next">Next →</a>
</div>
</form>
</div>
<!-- End Body -->
<footer class="container-fluid">
<div class="text-center">
<h1>Hire a hero</h1>
<p>for help around your home or office</p>
</div>
<div class="text-left">
<div class="col-md-2 col-md-offset-1">
<h4>Quick Links</h4>
<ul>
<li><a href="#">Become a VetPro</a></li>
<li><a href="#">Customer Registration</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">View our VetPros</a></li>
</ul>
</div>
<div class="col-md-2 col-md-offset-2">
<h4>Reference</h4>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Services offered</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</div>
<div class="col-md-2 col-md-offset-2">
<h4>Contacts</h4>
<ul>
<li><a href="#">Feedback</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
<script>
$('#dob').datepicker({
autoclose: true
});
var placeSearch, autocomplete;
function initAutocomplete() {
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('full_address')),
{types: ['geocode']});
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
var place = autocomplete.getPlace();
document.getElementById('full_address').value = place.formatted_address.replace(", USA", "");
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuqqRyIQcvB2Hzd7VKgdSphWfFuWh40kI&signed_in=true&libraries=places&callback=initAutocomplete" async defer></script>
<script type="text/javascript" src="../../assets/javascripts/forms.js"></script>
<script type="text/javascript" src="../../assets/javascripts/header.js"></script>
答案 0 :(得分：1)
我在使用模式的boostrap页面遇到了类似的问题，并通过在我的自定义CSS文件中使用它来简单地抵消更改来解决。
.modal-open {
padding-right: 17px;
}
如果这不是专门针对您的页面工作的，那么这是一个记录在案的问题，也许可以在git线程中找到另一个修复程序：link to thread