2014-11-20 67 views
2

我有页面在这里有2个元素在它和bootstrap在运行,但我没有使第一个元素响应。
第一个元素是一个具有Lazy Line Painter路径动画的SVG,它拒绝变得对写入的代码有反应,当窗口被调整大小时不会移动,我需要帮助。如何使窗口调整大小时使元素移动(引导使用)?

第二个元素是一个标题,它是响应和看起来不错。

的问题是:我如何获得的第一个元素表现得像第二,从而响应,而不是固定的(因为它调整窗口大小时,似乎固定)

HTML:

<!DOCTYPE html> 
<!--[if lt IE 9]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]--> 
<html> 
    <head> 
     <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Oswald:700'> 
      <meta charset="utf-8"> 
      <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
      <title>The Code Home</title> 
      <!--CSS Start--> 
      <link rel="stylesheet" type="text/css" href="css/animate.css"> 
      <link rel="stylesheet" type="text/css" href="css/main.css"> 
      <!--CSS End--> 
      <!--Scripts Start--> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
      <script src="js/jquery.lazylinepainter-1.4.1.js"></script> 
      <script src="js/raphael-min.js"></script> 
      <script src="js/main.js"></script> 
      <!--Scripts End--> 
     </head> 
     <body> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <div id="pencilandbrackets"></div> 
        </div> 
       </div> 
      </div> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <div id="title" class="animated bounceInDown">The Code Home</div> 
        </div> 
       </div> 
      </div> 



      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
     </body> 

CSS:

/*=======MAIN CSS=======*/ 

body { 
    background:#2ecc71; 

} 

#pencilandbrackets { 
    position: absolute; 
    top:-170px; 
    left:200px; 

    display: block; 
} 

#title { 
    font-family: 'Oswald', sans-serif; 
    font-size: 4.13em; 
    position: fixed; 
    top:40%; 
    left:50%; 
    margin: -1.0em 0px 0px -3.2em; 
    color: #2c3e50; 
    display: block; 
} 

.lazy-line svg { 
    width:300% !important; 
} 

回答

0

您可以用最大宽度创建一个新的@media查询,您想要隐藏该元素,然后在要隐藏的元素上使用display: none;

+0

我已经更新了这个问题,因为我没有清楚地解释我想要什么。 – 2014-11-21 15:40:38

相关问题