相关疑难解决方法(0)

为什么我的Twitter Bootstrap表单字段使用流体容器溢出?

更新:这里的问题演示:http://jsfiddle.net/fdB5Q/embedded/result/

从大约767px到998px,表格字段比包含井更宽.

小于767px,整个表格区域转换为新线.浏览器窗口宽度约为200px时呈现的页面显示完美.表单字段按预期缩小.

对于视觉,请看这个非常相似的问题: Twitter Bootstrap CSS静态流体形式定位

这是头部的一切:

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
Run Code Online (Sandbox Code Playgroud)

这是身体里的一切:

<div class="container-fluid">

<div class="row-fluid">

<div class="span8">
<p>Some Content.</p>
</div>

<div class="span4">
  <div class="well">    
    <div class="control-group">
      <label class="control-label" for="name">Your Name</label>
      <div class="controls">
      <input type="text" class="input-xlarge" name="name" id="name" maxlength="100" />
      </div>
    </div>
  </div>
</div>

</div>

</div>
Run Code Online (Sandbox Code Playgroud)

我想我误解了框架的某些部分.我不应该使用液体容器吗?我究竟做错了什么?我可以把一些东西放在一起解决这个问题,但我认为问题可能是我做错了大事.

我尝试将我的跨度改为7和5,但仍然有同样的错误.我尝试了6和6,但在那时页面看起来很荒谬.其余的答案对我来说没有意义.

我将输入类更改为大而不是xlarge.它仍然有一个宽度范围,它溢出,如果显示器上有空间我真的想要更宽的表格字段.

我想避免水平滚动条,我想在我的智能手机上以横向或肖像模式使页面文本大小相同.

更新:图片

我的问题页面:

问题页面

简化版:

简单版

浏览器宽度为200 px的简化版本:

简单版本,宽度为200px

html css twitter-bootstrap

41
推荐指数
1
解决办法
6万
查看次数

标签 统计

css ×1

html ×1

twitter-bootstrap ×1