调整窗口大小时如何使元素移动（使用引导程序）？答案

【问题标题】：How to make element move when window is resized (bootstrap in use)?调整窗口大小时如何使元素移动（使用引导程序）？
【发布时间】：2015-01-18 21:06:45
【问题描述】：

我在这里有一个页面，其中包含 2 个元素并在运行时引导，但我未能使第一个元素响应。
第一个元素是带有来自 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;
}

【问题讨论】：

标签： html css svg responsive-design

【解决方案1】：

您可以创建一个新的@media 查询，并使用您希望隐藏此元素的最大宽度，然后在您希望隐藏的元素上使用display: none;。

【讨论】：

我已经更新了这个问题，因为我没有清楚地解释我想要什么。