0

我尝试使用引导程序创建一个演示页面，但在某些尺寸上它的行为很奇怪。可能我错过了引导程序的一些关键方面，或者它可能是一个错误:) 你能在这里给我一些建议吗？该问题似乎是由表单/字段本身引起的。尝试添加一些跨度等，但也没有工作。1024x768 的布局变得更糟：D 输入字段脱离容器。

<!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>
4

1 回答 1

1

类喜欢 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>
于 2013-04-10T10:06:21.003 回答