个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
31
4
我有一个使用模式的表单。似乎在任何浏览器上，当我单击图标(上传链接)时，模式弹出，然后页面向左缩小一点。
此处为实例: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>
最佳答案
我在使用模式的 boostrap 页面中遇到了类似的问题，并通过简单地在我的自定义 CSS 文件中抵消此更改来解决。
.modal-open {
padding-right: 17px;
}
如果这在您的页面上不起作用，这是一个已记录的问题，也许可以在 git 线程中为您找到另一个修复:link to thread
关于html - 展示 Twitter Bootstrap 模态调整大小页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34010178/
31
4
0
我创建了一个邻接链表来显示城市之间的航类。该程序从 2 个文件中读取，一个包含城市名称，另一个包含不同航类的来源和目的地。我为所服务的城市创建了一个数组，并为数组的每个城市索引创建了一个连接城市的链接
我正在寻找可以让我更好地了解着色器在游戏中的用途、它们可以做什么，甚至更重要的是，它们不能做什么的资源。我了解图形管道的工作原理以及所有这些，并且我在 GLSL 中制作了一些非常基本的着色器(主要是为
我正在尝试根据单选按钮的选择制作显示两个 div 之一的东西。就单选按钮而言，我有这段代码: 然后是我的DIV: Purchase and Sale Purchase or Sale 我
谁能告诉我应该使用哪些 GitHub API 来检索 GitHub 展示？谢谢。 为了获取GitHub的列表showcases ，我应该使用什么确切的 GitHub API？ 选择主题后，要检索该主题
我添加了 showcaseview jar 到我的项目中并像这样使用它 ShowcaseView.ConfigOptions co = new ShowcaseView.ConfigOptio
如果这不可能，那么在使用应用程序 3 分钟后我该如何做？这将用于“给我们评分”提醒，但我希望用户在要求他们评分之前有一些时间实际使用该应用程序。 最佳答案 - (BOOL)application:(U
除了选择 0-4 之间的随机数，如果它的 3 显示广告，是否有更好的方式来展示插页式广告？ 此方法有其缺点，因为有时广告不会展示一段时间，有时它们会连续展示 3 次，这非常烦人。任何帮助将不胜感激!
我们正在尝试在我们的 Android 应用程序中监控 Firebase 云消息传递功能的状态。我们经常收到用户的反馈，他们说他们没有。 通过检查 Google Firebase 报告工具，我们发现在过
我制作了一个加载苹果测试广告的测试应用程序。我想知道如何加载实时广告而不是苹果测试广告。加载实时 iAd 的机制是什么？任何人都可以在这方面帮助我吗？ 问候阿卜杜勒·萨马德 最佳答案 作为docume
我正在尝试让我的应用程序在屏幕上休眠。 我研究过 pmset 但没有成功，我什至尝试过 IOHIDPostEvent。我可以让 IOHIDPostEvent 按下 Eject 键，但设置 Shift
有没有办法使用 manim 显示 latex 表并为其设置动画？ 例如 \begin{table}[] \centering \begin{tabular}{lllll} & & \multico
有没有办法使用 manim 显示 latex 表并为其设置动画？ 例如 \begin{table}[] \centering \begin{tabular}{lllll} & & \multico
此代码调用新数据并将其放入 div，但不会替换旧的 htm。它只是增加了它。代码中有错误，但我找不到它们。如何获取它来替换 htm 文件而不仅仅是添加到数据中？ .click(function ()
我想检测网络状态，当网络状态发生变化时，在当前 Controller 中显示错误 View 。但是使用协议(protocol)有一个问题。这是代码: private func networkingDe
我被要求创建一个小环境，展示使用 NoSQL - SQL 混合数据库相对于仅使用 SQL 数据库的优势。由于我的背景主要是管理/DevOps，所以我对数据库有基本的了解，但我从未做过这样的事情。 我想
我有一个使用模式的表单。似乎在任何浏览器上，当我单击图标(上传链接)时，模式弹出，然后页面向左缩小一点。 此处为实例:http://dev.handyvet.org/VetProsDevSite/_M
我正在准备一个大师类，向工作中的一组技术美 worker 员展示。小组中的每个人以前都使用 C/C++/MEL/MAXScript/Python 进行过编程。该类(class)的目的是共同将每个人的技
几天前，我将我的 Beta (公开 Beta 测试) 应用程序提升到生产环境。一切顺利。我可以在 Playstore 中搜索我的应用程序。但是有一个问题，Playstore 没有删除我的应用程序名称旁
使用 Bootstrap 3，我想要一个方形的平铺菜单，看起来像 Bootstrap 的缩略图 (http://getbootstrap.com/components/#thumbnails)。获得平
我想显示 admob Ad通过mopub sdk在我的一个 iPhone 应用程序中，但我找不到 API Password和API Key通过 Ad Mob。 谁能帮我将 Admob 网络集成到 mo
我是一名优秀的程序员,十分优秀！