html - 控制网页的响应能力

Question

我有一个要求，如果页面拉伸(stretch)超过 992*1024 大小，那么页面应该展开并进行调整。但是当页面大小小于 992*1024 大小时，浏览器应该添加滚动，如下图所示:

#maincontent {
  padding: 0px 10% 2% 10%;
}
.infodiv {
  font-weight: bold;
  margin-top: 3%;
}
.ordiv {
  font-weight: bold;
  margin-top: 3%;
  min-width: 400px;
  width: 30%;
}
#formdata {
  background-color: #166bb3;
  height: 470px;
  min-width: 410px;
  width: 30%;
}
#username,
#selectCou {
  height: 36px;
  border: 0px;
  background: #e0dede;
  appearance: none;
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 0px;
}
#selectCou {
  overflow: hidden;
  background: url(../images/downarrowOne.png) no-repeat right #ddd;
  border: 1px solid #ccc;
}
#example1 {
  height: 36px;
  width: 149px;
  background: #e0dede;
  appearance: none;
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  border-radius: 0px;
}
#selectGen {
  height: 36px;
  width: 149px;
  background: #e0dede;
  overflow: hidden;
  background: url(../images/downarrowOne.png) no-repeat right #ddd;
  border: 1px solid #ccc;
  border-radius: 0px;
}
.alignPos {
  width: 18%;
}
.imgPos {
  padding-top: 3%;
}
.styled-select select {
  appearance: none;
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
}
.custombtn {
  width: -moz-available;
  height: 36px;
  background: #e0dede;
  border-radius: 0px;
}
#fbbtn {
  background: #ffbf00;
  height: 47px;
  border: 1px solid #FA2;
  border-bottom-left-radius: 0px 0px;
  border-bottom-left-radius: 0px 0px;
  border-bottom-right-radius: 0px 0px;
  border-bottom-right-radius: 0px 0px;
  border-top-left-radius: 0px 0px;
  border-top-left-radius: 0px 0px;
  border-top-right-radius: 0px 0px;
  border-top-right-radius: 0px 0px;
  color: #333;
  display: block;
  font: normal normal bold 18px/normal Arial, sans-serif;
  padding: 8px 0px 5px 10px;
  text-decoration: none;
  text-shadow: #FE6 0px 1px 0px;
  margin-left: 3%;
  margin-top: 6%;
  width: 49.5%;
  min-width: 300px;
}
#gbtn {
  background: #ffbf00;
  height: 47px;
  border: 1px solid #FA2;
  border-bottom-left-radius: 0px 0px;
  border-bottom-left-radius: 0px 0px;
  border-bottom-right-radius: 0px 0px;
  border-bottom-right-radius: 0px 0px;
  border-top-left-radius: 0px 0px;
  border-top-left-radius: 0px 0px;
  border-top-right-radius: 0px 0px;
  border-top-right-radius: 0px 0px;
  color: #333;
  display: block;
  font: normal normal bold 18px/normal Arial, sans-serif;
  padding: 8px 0px 5px 10px;
  text-decoration: none;
  text-shadow: #FE6 0px 1px 0px;
  margin-left: 3%;
  margin-top: 6%;
  width: 49.5%;
  min-width: 300px;
}
.imgcontainer {
  background: #E6E6E6;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="maincontent" class="container-fluid">
  <div class="row">
    <div class="col-md-6 infodiv">Fill your information here</div>
    <div class="col-md-6 ordiv">Or</div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <form id="formdata" role="form" class="form-horizontal">
        <div class="col-xs-3 imgPos alignPos" style="padding=0;">
          <img src="images/username.png" alt="User name" class="img-responsive" style="margin-left: 6%;">
        </div>
        <div class="col-xs-9 imgPos">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="User name" id="username">
          </div>
        </div>
        <div class="col-xs-3 alignPos" style="padding:0;">
          <img src="images/confirm password.png" alt="User name" class="img-responsive" style="margin-left: 15%;">
        </div>
        <div class="col-xs-9">
          <div class="form-group">
            <input type="password" class="form-control" placeholder="Password" id="username">
          </div>
        </div>
        <div class="col-xs-3 alignPos" style="padding:0;">
          <img src="images/confirm password.png" alt="User name" class="img-responsive" style="margin-left: 15%;">
        </div>
        <div class="col-xs-9">
          <div class="form-group">
            <input type="password" class="form-control" placeholder="Password confirmation" id="username">
          </div>
        </div>
        <div class="col-xs-3 alignPos" style="padding:0;">
          <img src="images/email.png" alt="User name" class="img-responsive" style="margin-left: 15%;">
        </div>
        <div class="col-xs-9">
          <div class="form-group">
            <input type="email" class="form-control" placeholder="Email" id="username">
          </div>
        </div>
        <div class="col-xs-3 alignPos" style="padding:0;">
          <img src="images/country.png" alt="User name" class="img-responsive" style="margin-left: 15%;">
        </div>
        <div class="col-xs-9">
          <div class="form-group">
            <select id="selectCou" class="form-control">
              <option value="" disabled selected>Select your country</option>
              <option>India</option>
              <option>Singapore</option>
              <option>Thailand</option>
            </select>
          </div>
        </div>
        <div class="col-xs-3 alignPos" style="padding:0;">
          <img src="images/city.png" alt="User name" class="img-responsive" style="margin-left: 15%;">
        </div>
        <div class="col-xs-9">
          <div class="form-group">
            <select id="selectCou" class="form-control">
              <option value="" disabled selected>Select your city</option>
              <option>Delhi</option>
              <option>Singapore</option>
              <option>Bangkok</option>
            </select>
          </div>
        </div>
        <div class="col-xs-3 alignPos" style="padding:0;">
          <img src="images/birth.png" alt="User name" class="img-responsive" style="margin-left: 15%;">
        </div>
        <div class="col-xs-9">
          <div class="form-group">
            <input type="text" placeholder="Date of Birth" id="example1" class="form-control">
          </div>
        </div>
        <div class="col-xs-3 alignPos" style="padding:0;">
          <img src="images/city.png" alt="User name" class="img-responsive" style="margin-left: 15%;">
        </div>
        <div class="col-xs-9">
          <div class="form-group styled-select">
            <select id="selectGen" class="form-control">
              <option value="" disabled selected>Select Gender</option>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div>
        </div>
        <div class="col-xs-4" style="margin-left: 59%;">
          <div class="form-group">
            <button type="submit" class="form-control btn btn-default custombtn">Register</button>
          </div>
        </div>
      </form>
    </div>
    <div class="col-md-6">
      <div id="fbbtn">
        <img src="images/fbOne.png" style="padding-right:2%;">Register with Facebook</div>
      <div id="gbtn">
        <img src="images/gPlus.jpg" style="padding-right:2%;width: 14%;">Register with Google</div>
    </div>
  </div>
</div>

当我将页面大小减小到超过 992*1024 大小时，或 div 和register with FB 和register with Google 会下降。我不希望发生这种情况。当我将大小减小到 992*1024 大小时，浏览器应该简单地添加滚动条。我该怎么做？
JSFiddle 链接是 here .

Answer 1

你可以给#maincontent 添加一个最小宽度

#maincontent {
    padding: 0px 10% 2% 10%;
    min-width: 1200px;
}

除此之外，bootstrap 列也需要更新。它应该是“col-xs-”而不是“col-md-”。

更新代码可在以下链接获得 http://output.jsbin.com/yocahahevi