Bootstrap登录页面在某些屏幕尺寸上被破坏

问题描述：

我试图用bootstrap创建一个演示页面，但在某些尺寸下它的行为很奇怪。可能我错过了bootstrap的一些关键方面，或者它可能是一个bug :)你能给我一些建议吗？这个问题似乎是由form/field本身造成的。试图添加一些跨度等，但也没有工作。在1024x768中布局变得更糟：D输入字段从容器中取出。Bootstrap登录页面在某些屏幕尺寸上被破坏

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Page Title</title> 
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"> 
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"> 
<!-- HTML5 shim for IE backwards compatibility --> 
<!--[if lt IE 9]> 
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head> 

<body> 
<div class="page-header"> 
    <h1 class="text-center">Welcome</h1></div> 

<div class="container-fluid"> 
<div class="row-fluid"> 

<div class="span4 offset4 well"> 
    <form class="form-horizontal"> 
    <fieldset> 
     <legend>Please login</legend> 
     <div class="control-group"> 
     <label class="control-label">User name</label> 
     <div class="controls"> 
      <input id="textinput" name="textinput" class="input-xlarge" required type="text"> 
     </div> 
     </div> 
     <div class="control-group"> 
     <label class="control-label">Password</label> 
     <div class="controls"> 
      <input id="passwordinput" name="passwordinput" class="input-xlarge" required type="password"> 
     </div> 
     </div> 
     <div class="control-group"> 
     <label class="control-label"></label> 
     <div class="controls"> 
      <button id="giris" name="giris" class="btn btn-primary">Login</button> 
     </div> 
     </div> 
    </fieldset> 
    </form> 
    <p class="muted">This is a demo login page <a class="text-error" href="#">click here</a> for more info.</p> 
    </div> 
    </div> 


    <div class="row-fluid"> 
     <div class="span4 offset4 well"> <p>Lorem ipsum dolor sit amet</p> </div> 
    </div> 


</div> 
<script src="http://code.jquery.com/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html>

能重现上jsfddle让我们来看看这个问题？ – 2013-04-10 10:04:47

答

类，如span4和offset4按照引导实现响应布局机制。我的建议是为自己的左右边距添加一些固定宽度的表单容器。

http://jsfiddle.net/6uwkL/

CSS

.form-container { 
    width: 600px; 
    margin: 0 auto 20px auto; 
}

HTML

<div class="page-header"> 
    <h1 class="text-center">Welcome</h1></div> 

<div class="container-fluid"> 
<div class="row-fluid"> 

<div class="form-container well"> 
    <form class="form-horizontal"> 
    <fieldset> 
     <legend>Please login</legend> 
     <div class="control-group"> 
     <label class="control-label">User name</label> 
     <div class="controls"> 
      <input id="textinput" name="textinput" class="input-xlarge" required type="text"> 
     </div> 
     </div> 
     <div class="control-group"> 
     <label class="control-label">Password</label> 
     <div class="controls"> 
      <input id="passwordinput" name="passwordinput" class="input-xlarge" required type="password"> 
     </div> 
     </div> 
     <div class="control-group"> 
     <label class="control-label"></label> 
     <div class="controls"> 
      <button id="giris" name="giris" class="btn btn-primary">Login</button> 
     </div> 
     </div> 
    </fieldset> 
    </form> 
    <p class="muted">This is a demo login page <a class="text-error" href="#">click here</a> for more info.</p> 
    </div> 
    </div> 


    <div class="row-fluid"> 
     <div class="form-container well"> <p>Lorem ipsum dolor sit amet</p> </div> 
    </div> 


</div>

谢谢！它以这种方式工作。很好的例子学习，赞赏！ – cevizmx 2013-04-10 10:25:04

Bootstrap登录页面在某些屏幕尺寸上被破坏

相关推荐