引导模式不会在移动设备上触发
Bootstrap modal wont trigger on mobile
我正在设计一个网站在bootstrap,并希望有我的弹出窗口在移动设备上工作,自卫部分不会触发移动设备,这是相当令人沮丧!
我看了一下代码,似乎没有什么问题,因为家庭防御工作正常。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2nd Amendment Guns</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="/nick/guns/dev/favicon.ico" rel="icon">
<meta content="initial-scale=1, maximum-scale=1" name="viewport">
<style>
@media (max-width: 767px){
.alignme{
text-align: center!important;
}
}
.tab-pane ul {
list-style-type: none;
}
}
.navbar-collapse {
max-height: none;
}
@media (max-width: 954px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
@media (min-width: 600px) {
.onlydesktopmargin {
margin-top: 75px;
}
.branding {
float: right;
}
}
@media (min-width: 1200px) {
.onlydesktopmargin {
margin-top: 75px;
}
}
@media (min-width: 768px) and (max-width: 1000px) {
.navbar-nav>li {
padding-left: 5px;
padding-right: 5px;
}
}
@media (min-width: 1000px) {
.navbar-nav>li {
padding-left: 10px;
padding-right: 10px;
}
}
@media (min-width: 1100px) {
.navbar-nav>li {
padding-left: 20px;
padding-right: 25px;
}
}
@media (min-width: 1240px) {
.navbar-nav>li {
padding-left: 30px;
padding-right: 30px;
}
}
@media (max-width: 954px) {
.branding {
margin-left: auto;
margin-right: auto;
float: none;
}
}
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.contact a {
font-size: 23px;
}
.center {
text-align: center;
}
.img-responsive {
margin-left: auto;
margin-right: auto;
}
a.thumbnail: hover, a.thumbnail: focus, a.thumbnail.active {
border-color: red;
}
.tab-content {
padding-top: 10px;
}
.footer p,
a {
font-size: 10px;
}
@media (min-width: 1200px) {
.desktoppadding {
padding-top: 55px;
}
}
.modal {
color: black;
}
.thumbnail {
background-color: transparent;
padding-top: 5px;
}
.navbar-toggle .icon-bar {
background-color: white;
}
.center {
text-align: center;
}
@media only screen and (min-width: 768px) {
.navbar-nav>li>a {
padding: 15px;
font-size: 13px;
}
.navbar-nav {
margin-top: 30px;
}
}
@media only screen and (min-width: 884px) {
.navbar-nav>li>a {
padding: 19px;
font-size: 17px;
}
}
.navbar {
border-bottom: hidden;
}
body {
font-size: 17px;
background-color: black;
color: white;
letter-spacing: 1.5px;
line-height: 1.5;
text-align: center!important;
}
.center {
text-align: center;
}
.navbar-brand {
font-size: 40px;
}
.navbar-dn {
background-color: black;
}
.active>a: focus {
background-color: #ecf0f1;
color: white;
}
.navbar-dn .navbar-nav>.active>a {
color: black;
background-color: #c0392b;
border-radius: 15px;
}
.nav>li>a: hover, .nav>li>a: focus {
background-color: white;
color: black;
}
a {
color: #cccccc;
font-size: 11px;
}
a: hover, a: focus {
color: white;
text-decoration: none;
}
hr {
border-top: 1px solid #c0392b;
}
.rotate {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.rotate: hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
</style>
</head>
<body data-offset="190" data-spy="scroll" data-target="#myNavbar">
<nav class="navbar navbar-dn navbar-fixed-top" id="myNavbar">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" style="margin-top: 30px;" type="button"><span class="sr-only">Toggle
navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand rotate">
<img height="80px;" src="assets/images/guns.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse" style="border-bottom:1px solid #c0392b;">
<ul class="nav navbar-nav">
<li class="active"><a href="#section-1">Defense</a>
</li>
<li><a href="#section-2">Competition</a>
</li>
<li><a href="#section-3">Class 3</a>
</li>
<li><a href="#section-4">About / Contact</a>
</li>
</ul>
<a href="http://delandgoldsmith.com/" class="navbar-brand rotate branding">
<img height="80px;" src="assets/images/goldlogo.png">
</a>
</div>
</nav>
<div class="container" id="section-1" style="padding-top:100px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h2 class="center">Home-Defense</h2>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 onlydesktopmargin">
<p>
The biggest question for first time firearm purchasers are…. Hand gun or Long gun? Pistol or Revolver? Shotgun or Rifle? Any gun is better than no gun when faced with an intruder, but some are better choices than others when it come to home-defense.
</p>
</div>
<!-- Button trigger modal -->
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="row">
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-home-3" data-toggle="modal">
<img src="http://www.smith-wesson.com/wcsstore/SmWesson2/upload/images/firearms/detail_md/162410_01_md.jpg">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-home-4" data-toggle="modal">
<img src="http://utas-usa.com/cache/product_13EA654CCB1E43CEA3D3C852E146B6C5_330x330.JPG">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-home-5" data-toggle="modal">
<img src="https://www.keltecweapons.com/media/article/image/cache/414-355-productionKSG_right_4052hires.png">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-home-1" data-toggle="modal">
<img class="img-responsive" src="http://www.taurususa.com/images/imagesMain/4510PLY-SS2_01.jpg">
</a>
</div>
<div class="col-xs-6 col-md-4 col-lg-8">
<a class="thumbnail" data-target="#Modal-home-2" data-toggle="modal">
<img src="https://s3.amazonaws.com/savagefiles/firearms/models/900/ysZ0b0yu6_nYi3JEpBa.png">
</a>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3>
Pistols and Revolvers
</h3>
<p>
Most pistols are semi-automatic and are easier to shoot than revolvers, although they are much more complicated to operate. Revolvers, especially the Taurus Judge or the Smith & Wesson Governor, are very viable for home-defense weapons because they can
use either .410 shotgun shells or .45 Long Colt ammo.
</p>
<h3>
Shotguns and Rifles
</h3>
<p>
The shotgun is considered to be the ultimate home-defense weapon. While very effective there are some drawbacks to using a shotgun in your home. A shotgun is designed to be operated with two hands for accuracy. This makes is more difficult to move about
the house with ease. The “scatter of the pellets” could also be a major concern. Rifles, AR-15 and others, are very popular right now, but cost considerably more and still have issues with size and ammo availability.
</p>
<p>
All in all, no matter which gun you choose, become familiar with it. If you shoot it regularly, a firearm can save the lives of you and your family.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h2 class="center">Self-Defense</h2>
<!-- Button trigger modal -->
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-7" data-toggle="modal">
<img src="http://www.coltsmfg.com/Portals/0/productimages/2013/O1980RG.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-2" data-toggle="modal">
<img src="http://www.smith-wesson.com/wcsstore/SmWesson2/upload/images/firearms/detail_md/109381_01_md.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-3" data-toggle="modal">
<img src="http://www.magnumresearch.com/GetDynamicImage.aspx?path=SVimgR-DE1911U.jpg&h=326&w=278" class="img-responsive">
</a>
</div>
<div class="row">
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-4" data-toggle="modal">
<img src="http://ruger.com/products/lcr/images/5413.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-5" data-toggle="modal">
<img src="http://www.ruger.com/products/lcp/images/3713.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-8" data-toggle="modal">
<img src="http://www.bersa.com/skin/frontend/blank/theme063/images/guns/Thunder-380-XmatN-L-prev.jpg" class="img-responsive">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-1" data-toggle="modal">
<img src="../assets/images/glock42.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-6" data-toggle="modal">
<img src="http://www.sigsauer.com/upFiles/catalog/product/P320-FS-Nitrondetail-L.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-9" data-toggle="modal">
<img src="http://nebula.wsimg.com/41873d0f5a8195cd431efeb5abe4900a?AccessKeyId=77500781996CFD82E891&disposition=0&alloworigin=1" class="img-responsive">
</a>
</div>
</div>
</div>
<div class="col-lg-6">
<p>
Hand guns come in two basic types- Pistols and Revolvers. Revolvers, like the Smith & Wesson Airweight or the Ruger LCR, have a visible rotating cylinder that holds 5 or 6 rounds of ammunition. Pistols are almost always semi-automatic. These include the
Bersa Thunder .380 and any of the Glocks. Pistols hold the ammunition in an internal magazine and generally hold more rounds than a revolver.
</p>
<p>
How you carry your self-defense weapon is more important than which gun you choose. If you can not access your gun quickly and easily, you might as well not have a gun at all. Holsters, either inside or outside the pants on the waist, seem to be the best
option since they are quick and have easy access. Other options include carrying in your pocket, purse or fanny pack. A firearm should always be holstered not matter which way you decide to carry.
</p>
</div>
</div>
</div>
</div>
<!--DEFENSE Ends here-->
<!--Competition Starts-->
<div class="container" id="section-2">
<hr>
<h2 class="center">
Competition
</h2>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<p>
There are many factors to consider while choosing the right firearm for competition shooting. Factors such as what type of competitions and which division you plan to compete in, action type, and holster availability. We cater to all IDPA, USPSA, ICORE
and Steel Challenge competition shooters. Our inventory ranges from basic Glocks to race guns that are custom made to your shooting ability and level.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-competition-1" data-toggle="modal">
<img src="../assets/images/glockrace.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-competition-4" data-toggle="modal">
<img src="http://www.smith-wesson.com/wcsstore/SmWesson2/upload/images/firearms/detail_md/178031_01_md.jpg" height="150" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-competition-3" data-toggle="modal">
<img src="http://www.smith-wesson.com/wcsstore/SmWesson2/upload/images/firearms/detail_md/178058_01_md.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-competition-2" data-toggle="modal">
<img src="../assets/images/glock35.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-8 col-md-4 col-lg-8">
<a class="thumbnail" data-target="#Modal-competition-5" data-toggle="modal">
<img src="../assets/images/competition5.jpg" class="img-responsive">
</a>
</div>
</div>
</div>
<!--Competition Ends-->
<!---class3 starts-->
<div class="container" id="section-3">
<hr>
<h2 class="center">Class 3</h2>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="http://www.gem-tech.com/store/pc/catalog/photobar_mm9_2012_899_general.jpg" class="img-responsive">
</div>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="http://www.sigsauer.com/upFiles/catalog/product/516-pdw-Detail-Hero.jpg" class="img-responsive">
</div>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="http://www.johnsguns.us/images/glock.jpg" class="img-responsive">
</div>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="../assets/images/class4.jpg" class="img-responsive">
</div>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="../assets/images/class5.jpg" class="img-responsive">
</div>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="../assets/images/class6.jpg" class="img-responsive">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<p>
Class 3 weapons, also known as NFA weapons, are machine guns, short barrel shotguns, short barrel rifles, and sound suppressors.
</p>
<p>
A machine gun is any gun that can fire more than one shot with a single pull of the trigger. Short barrel shotguns are any shotgun with a barrel length of less than 18” or an overall length of 26”. Short barrel rifles, similar to short barrel shotguns,
have a barrel length is less than 16”, while the overall length is also 26”.
</p>
<p>
A sound suppressor or silencer is any device for muffling the sound of the gunshot. We carry brands such as Silencer Co. and Gemtec. We also sell rifles that the entire barrel is suppressed.
</p>
</div>
</div>
</div>
<!---class3 ends-->
<!--about start-->
<div class="container">
<hr>
<div class="row">
<div class="col-lg-12">
<h2 class="center">About / Contact</h2>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" id="section-4">asdf
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
asdf
</div>
<div class="col-lg-12" style="text-align:center;">
<h3>
Concealed Carry Class
</h3>
<p>
All classes are taught by Sean Beery (owner Volusia County Gun & Hunt Club).
</p>
<p>
All necessary paper work provided.
</p>
<p>
Instructor makes sure all paperwork is filled out CORRECTLY!
</p>
<p>
(if it’s not filled out correctly it will be kicked back and delay your permit)
</p>
<p>
Police Officer will be here doing fingerprinting
</p>
<p>
Passport Picture will be taken and processed during class
</p>
<p>
Classroom session is roughly 4 hours
</p>
<p>
asdf
</p>
<p>
If you don’t have a firearm, we can provide one for you. The ammo will be an additional charge, you will need about 50 rounds.
</p>
<p>
You will have full access to the range once class is done.
</p>
</div>
</div>
</div>
<div class="container">
<div class="col-lg-12 col-xs-12 contact" style="text-align:center;">
<hr>
<h2>
<a href="tel:3867366466"><i class="fa fa-phone"></i>
(386)736-6466 </a>
</h2>
<hr>
</div>
<div class="col-lg-2 col-md-2">
</div>
<div class="col-lg-8 col-md-8 col-xs-12">
<!-- Responsive iFrame -->
<div class="col-lg-2 col-md-2">
</div>
</div>
<div class="footer">
<div class="col-lg-4 col-md-3 col-sm-3 col-xs-12">
<p>Deland Goldsmith & Firearms
</p>
</div>
<div class="col-lg-4 col-md-3 col-sm-2 col-xs-12">
<p style="text-align:center;">
map
</p>
</div>
<div class="col-lg-4 col-md-6 col-sm-7 col-xs-12 alignme" style="text-align:right;">
<p>Designed by <a href="https://plus.google.com/+RobertKhayat">Robert Khayat</a> @ <a href="http://dnwebdev.com/">Day & Night Web Solutions, LLC</a>
</p>
</div>
</div>
<!---transfers ends=-->
<!---modals--->
<div class="modal fade" id="Modal-self-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title" id="myModalLabel">Glock 42</h4>
</div>
<div class="modal-body">
<img alt="image" class="img-responsive" src="../assets/images/glock42.jpg">
<div class="tabs">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#description6">Description</a>
</li>
<li class=""><a data-toggle="tab" href="#techspecs6">Tech Specs</a>
</li>
</ul>
<div class="tab-content" id="myTabContent6">
<div class="tab-pane fade active in" id="description6">
<p>The new GLOCK 42, in .380 AUTO, is a slimline subcompact pistol engineered with the GLOCK Perfection promise and able to withstand the rigors of routine training. Made in the USA, the G42 is the smallest pistol GLOCK has ever introduced, making
it ideal for pocket carry and shooters with smaller hands. Years of requests across market groups for a super-concealable, reliable single-stack .380 GLOCK pistol prompted extensive research and development to bring the GLOCK customer the G42.
</p>
</div>
<div class="tab-pane fade" id="techspecs6">
<ul>
<li>.380 AUTO / Safe Actio</li>
<li>Dimensions</li>
<li>LENGTH:151 mm / 5.94 in.</li>
<li>WIDTH:24 mm / 0.94 in.</li>
<li>LENGTH BETWEEN SIGHTS: 153 mm / 6.02 in.</li>
<li>HEIGHT:105 mm / 4.13 in.</li>
<li>BARREL LENGTH:82.5 mm / 3.25 in.</li>
<li>UNLOADED:390 g / 13.76 oz.</li>
<li>LOADED:~407 g / ~14.36 oz.</li>
<li>TRIGGER PULL:~25 N / ~5.5 lbs.</li>
<li>TRIGGER TRAVEL:~12.5 mm / 0.49 in.</li>
<li>Barrel Rifling / Length of Twist</li>
<li>BARREL RIFLING:right hand, hexagonal</li>
<li>LENGTH OF TWIST:250 mm / 9.84 in.</li>
<li>Magazine Capacity</li>
<li>STANDARD: 6</li>
</ul>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
<!---modal end--->
</div>
<script>
function close_toggle() {
if ($(window).width() <= 954) {
$('.nav a').on('click', function() {
$(".navbar-toggle").click();
});
} else {
$('.nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
//function that offsets scoll
if ($(window).width() <= 768) {
var offset = 160;
} else {
var offset = 170;
}
$('.navbar li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
</script>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
您所需要做的就是添加一些您错过的类:
<div class="col-lg-6">
<p>
Hand guns come in two basic types
:
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<p>
Hand guns come in two basic types
因为你没有指定类,在中等和较小的视口上,两个col-lg-6
都聚集在一起,这导致模态不能打开。
相关文章:
- 为移动设备调整页面大小时,引导模式会向下移动页面
- 使用弹出模式中断k-pager-nav以确认/拒绝移动到新页面
- 如何在移动设备中查看模式框时停止背景滚动,只需使用CSS或Javascript
- GWT开发模式或移动设备上的超级开发模式
- HTML5 移动键盘覆盖全屏模式下的输入
- 有没有办法将Google Analytics for Web置于“试运行”模式,例如GA移动SDK
- 将显示与位置绝对输出移动的表单放入移动模式引导按钮中
- 全屏模式下的 JavaScript 鼠标移动事件
- 从文件顶部移动javascript代码,可能使用设计模式
- 我将如何移动带有元素的 SVG 模式
- iframe关于光标移动问题的设计模式
- 引导模式导致页面向右移动
- IOS9正在阻止模式移动链接
- 当设置为导航栏固定顶部时,一页引导导航栏切换在移动模式下无法正常工作
- 如何修复移动中的横向模式HTML5 web应用程序
- 在移动设备上保持网站处于横向模式
- Durandal模式/对话框上下文,允许在移动设备上滚动
- 数据表行移动到引导模式后面使用RowReorder
- 引导模式移动到面板顶部单击
- 移动滚动日期选择器被jQuery移动模式隐藏