2014-11-20 64 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

相關問題