Html 问题：使用引导将网站窗口大小调整为手机大小_Html_Css_Twitter Bootstrap

Html 问题：使用引导将网站窗口大小调整为手机大小

html css twitter-bootstrap

Html 问题：使用引导将网站窗口大小调整为手机大小,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,当我试图使用Bootstrap设置一个可伸缩窗口时，元素的填充会改变伸缩性，网站无法正确伸缩到手机大小。我不知道如何解决这个问题我的HTML是 <!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, inital-scale=1.0"> <link href="bootstrap/css/

当我试图使用Bootstrap设置一个可伸缩窗口时，元素的填充会改变伸缩性，网站无法正确伸缩到手机大小。我不知道如何解决这个问题

我的HTML是

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link href='http://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="no.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>





    <header>
        <div class="navbar navbar-static-top">
            <div class="container">

            <a href="#" class="logo"></a>
                <nav class="navbar navbar-default navbar-custom" role="navigation">

                <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>

          <div class="collapse navbar-collapse navHeaderCollapse">

                <ul class="nav navbar-nav navbar-right">

              <li><a href="yes.html">About</a></li>
          <li><a href="team.html">The Team</a></li>
          <li><a href="#">Event Schedule</a></li>
          <li><a href="contact.html">Contact</a></li>

              </ul>

               </div>      

                </nav>
            </div>
        </div>

    </header>


        <section>




    <div class="container">





        <div class="row">


        <div class="who">


            <h2>Who Are We?</h2>
        <p>YES is an organization founded by youth for youth to help make a positive change within society. By supporting a large variety of organizations both big and small within the community, youth not only get the opportunity to explore their interests, but are able to gain a voice in society. If you are interested, our weekly meetings will begin in 2015.</p>





        </div>



        </div>

    <div class="row">


        <div class="why">


         <h2>Why YES?</h2>
    <p>We strive to provide youth (anywhere within Peel) with new experiences, help youth explore their interests, provide opportunities for them to socialize with other youth and provide them with activities to do which will help them in gaining volunteer hours. We will most likely have weekly meetings where we will discuss issues regarding a specific topic, which will be different every month! We will work together to create awareness about these topics by doing activities related to the topic and fundraising for an organization that supports or represents the topic. YES is a great way to gain your 40 hours and get exposure to many amazing organizations and activities!</p>

        </div>
    </div>



        <div class="row">

        <div class="update">


            <h2>Updates</h2>
            <p>Youth Engagement in Peel is a new orgination, as a result of which, the first meeting is scheduled to occur sometime in February. Voting will be posted on the "Event Schedule" page, and the topic will be updated on a month-to-month basis. Please check back for more information.</p>












            </div>








        </div>
        </div>


















    <footer>


                  <div class="navbar navbar-default navbar-custom navbar-fixed-bottom"> 
                      <div class="copy">
            <img src=img/facebook.png>
            <img src="img/twitter-wrap.png">
        <p>&copy;Youth Engagement in Society. All Rights Reserved</p>
                      </div>


        </div>
            </footer>
    </section>
</body>

如果要使用引导响应块类，则需要在.row类内部使用.col xs-*.col sm-*.col md-*.col lg-*

<div class="row">
    <div class="col-sm-6">column1</div>
    <div class="col-sm-6">column2</div>
</div>

看一些例子

您正在以错误的方式使用引导。。。跟着一些图图，你就会明白我如何在不使用固定宽度的情况下定位段落？即使我使用col-md-6，缩放比例也比navbar@VibhasVatve引导不会缩放您的内容不要使用固定宽度或如此远的边距和填充。。。。避免空白。对不起，我是一个编码新手。那么，如果我希望一个段落元素只占用列中的某个宽度，而不使用固定的宽度、边距或填充，我该如何使它具有响应性呢

<div class="row">
    <div class="col-sm-6">column1</div>
    <div class="col-sm-6">column2</div>
</div>