控制网页的响应能力

时间：2015-08-05 04:29:23

标签： html css twitter-bootstrap-3

我有一个要求，即如果页面超出992*1024大小，那么页面应该展开并进行调整。但是当页面大小小于992*1024大小时，浏览器应添加滚动，如下面的屏幕截图所示：
img 

#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以上时，or div和register with FB以及register with Google会降低。我不希望这种情况发生。当我将尺寸减小到992*1024尺寸以外时，浏览器应该只添加滚动。我该怎么办？ JSFiddle链接是here。

2 个答案:

答案 0 :(得分：1)

您可以为#maincontent

添加最小宽度 
#maincontent {
    padding: 0px 10% 2% 10%;
    min-width: 1200px;
}

除此之外，bootstrap列还需要更新。 它应该是＆＃39; col-xs - ＆＃39;而不是＆＃39; col-md - ＆＃39;。

以下链接提供了更新的代码 http://output.jsbin.com/yocahahevi

答案 1 :(得分：0)

只需在容器上设置最小宽度，使其不会缩小到低于阈值：

#maincontent {
  min-width: 992px;
}

如果您需要更好地了解各种视口尺寸，请使用media queries。

相关问题
最新问题