1
我试图玩这个联系表格：https://www.prepbootstrap.com/bootstrap-template/contact-form-map 我在网页上使用它。它看起来像这样：当我缩小网页时，为什么我的两个组件在引导程序中彼此重叠？
$("#trigger-overlay2").click(function() {
// \t $(this).toggleClass("active");
$(".overlay-boxify2").toggleClass("open");
});.overlay-boxify,
.overlay-boxify2 {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-boxify.open,
.overlay-boxify2.open {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
z-index: 9999;
}
.overlay2 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../img/grid.png);
background: rgba(222, 222, 222, 0.95)
}
@media only screen and (max-width: 1024px) {
.overlay2 {
overflow-y: scroll;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<a id="trigger-overlay2" href="#contact">Trigger!</a>
<div class="overlay2 overlay-boxify2">
<div class="container">
<div class="row">
<div class="tos-logo-contact">
<a href="./index.html">
<img src="../img/logo.png" alt="logo">
</a>
</div>
<div class="col-md-6">
<form id='contacts_form' action="#download" class="contact-list form-horizontal">
<div class="field-row col-xs-12">
<input class="form_item form-control" type="text" id="name2" name="name2" placeholder="Name" />
</div>
<div class="field-row col-xs-12">
<input class="form_item form-control" type="email" id="email" name="email2" placeholder="Email" />
</div>
<div class="field-row col-xs-12">
<textarea class="form_item form-control" style="resize:none" cols="30" rows="14" id="message" name="message2" placeholder="Message" title="some placeholder."></textarea>
</div>
<div class="field-row col-xs-12">
<div class="col-xs-6 button-send">
<input id="sendmessage" type="submit" class="form_submit sendbutton" value="Send" />
</div>
<div class="col-xs-6 button-cancel">
<button id="cancelContact" type="button" name="cancelContact" value="cancel" class="sendbutton">Cancel</button>
</div>
</div>
<div id="contact_results"></div>
</form>
</div>
<div class="col-md-6">
<div>
<div class="panel panel-default ">
<div class="text-center ourOffice">
<h4>Our Headquater:</h4>
<div>
Street
<br />City, Country
<br />
<a href="mailto:[email protected]" target="_top">mail</a>
<br />
</div>
<div id="map1" class="map">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>http://jsfiddle.net/fyw6kajm/5/（只打trigger链接）。
当网页是足够宽，它的工作原理：
但是，当我把它缩小，我的输入形式消失：
我该如何解决并在地图前显示我的表单？
我搬到你的代码堆栈片段@ randomuser1。一个JS小提琴自己的链接是不够的，就好像这个链接会死掉，这个问题就会失去背景并且没什么用处。这个问题本身应该包含所有需要的相关代码来重现这个问题。 –
谢谢@HiddenHobbes，将来我会记住:) – randomuser1
没问题@ randomuser1，很高兴我能帮上忙。 –