Question

所以，我不熟悉响应式设计，并将表单代码放在一个图像的顶部，它不会在移动视图中显示。它似乎发生在990px宽的范围内，表格将超出视野。我无法确定@media或什么CSS类在它达到一定宽度后隐藏表单的位置。

网址：subscribe.ign.com/social

   <div class="site-slider">
                <div class="slider">
                    <div class="flexslider">
                        <ul class="slides">
                            <li>
                                <div class="overlay"></div>
                                <img src="http://static.ziffdavis.com.s3.amazonaws.com/cimages/blackfriday/Black-Friday-Email-Landing-Pages/black-friday-chaos-store-1600x750.png" alt="">
                                <div class="slider-caption visible-md visible-lg">
                              <div id="bouncex" align="center" style="width:558px; margin: 0 auto; ">
                              
                              <!--LYRIS-->
                              <div class="heading-section col-md-12 text-center">
                        <div class="contact-form" style="background-color:#000 !important; padding: 25px">
                        <h2 style="text-transform:capitalize; font-size:34px">BLACK FRIDAY IS COMING</h2>
                        <br/>
                        <p style="text-transform:capitalize; font-size:28px">UP TO 50% OFF</p>
                        <h2 style="text-transform:capitalize; font-size:24px">ON HOTTEST GAMES AND TECH DEALS DELIVERED TO YOUR INBOX</h2>
                            <form name="contactform" id="contactform">
                               <p><input name="txtEmail" id="txtEmail" type="text" placeholder="Your Email"> 
                                </p>
                                 <input type="button" class="mainBtn" name="btnSubscribe" id="btnSubscribe" value="Subscribe">
                                 <input type="hidden" name="txtList" id="txtList" size="70" value="ign-deals" />
                                 <p style="color:#FFF;font-size:14px">Subscribing to a newsletter indicates your consent <br/>to our&nbsp;<a style="color:#d3222a; text-decoration:underline" href="http://www.ziffdavis.com/terms-of-use" title="Terms of Use" rel="nofollow">User Agreement</a>&nbsp;and&nbsp;<a style="color:#d3222a; text-decoration:underline" href="http://www.ziffdavis.com/privacy-policy" title="Privacy Policy" rel="nofollow">Privacy Policy</a><span id="article-punctuation" class="article-punctuation">
                                    
                                </span></p>
                            </form>
                        </div> <!-- /.contact-form -->
                    </div> <!-- END LYRIS -->
                              </div>
                                  </div>
                                    
                               
                            </li>
                           
                        </ul>
                    </div> <!-- /.flexslider -->
                </div> <!-- /.slider -->
            </div> <!-- /.site-slider -->

Answer 1

刚设置：

<ul class="slides" style="list-style:none; padding-left: 0;">

<img style="width: 100%; " src="your url" alt="">

立即试用： http://codepen.io/anon/pen/qOJEaw

Answer 2

您的slider-caption课程的div也有visible-md visible-lg，您应该删除这2个课程。基本上，它只在宽度为992像素或更大的屏幕上显示div。

您可以在bootstrap documentation

上详细了解相关信息

Answer 3

原因它正在消失＆＃39;是因为父元素：<div class="slider-caption visible-md visible-lg">。

display: none !important;的{{1}}是bootstrap断点。具体来说，虽然它是992px类正在执行它。 Read about that in the Bootstrap docs

div在移动视图中消失

3 个答案: