Question

当我尝试使用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>

我的CSS是

    body {
    background-color: #e8e8e8;

}

header {

    padding: 7px;
    background-color: white;
}

header img {

    text-align: center;
    height: 60px;
    width: 200px;
}



/* Navigation Bar */




.navbar-custom {
    color: white;
    background-color: white;
    border-color: white;
    margin-top:0px;

} 


navbar-inverse .navbar-brand { color: red;}

.navbar a {
  color: black;
  font-size: 15px;
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif;
}

.navbar li {

    display: inline;

}



/* Paragraphs and images*/


.who {
    width: 600px;
    margin-top:100px;
}   

.why {
    margin-top:100px;
    margin-left: 500px;
}   

.update {
    margin-top:100px;
    width: 600px;
}   


/* Footer */

footer {
    margin-top: 550px;
    background-color: #4f4f4f;
    clear: both;

}

footer p {
    color: black;

    padding-left: 200px;
}

.copy p {
    display: inline;
}

Answer 1

如果您想使用bootstrap responvie块类，则需要在.col-xs-*类中使用.col-sm-* .col-md-* .col-lg-* .row

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

观看一些例子 http://getbootstrap.com/getting-started/#examples

http://getbootstrap.com/css/#grid-options

使用bootstrap将网站窗口大小调整为移动大小

1 个答案: