具有响应式布局的表单答案

【问题标题】：Forms with responsive layout具有响应式布局的表单
【发布时间】：2012-06-01 04:22:18
【问题描述】：

为什么文本字段不遵循.span1 规则？我能做些什么来解决它？

<html>
<head>
  <title></title>
</head>
<body>
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span12">
        <form class="form-horizontal">
          <fieldset>
            <div class="control-group">
              <label class="control-label" for="focusedInput">Focused input</label>
              <div class="controls">
                <input class="focused span1" id="focusedInput" type="text"
                value="This is focused" />
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">Uneditable input</label>
              <div class="controls">
                <span class="span1 uneditable-input">Some value here</span>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

解决此问题的快速方法是将row-fluid 更改为row。但是如何在仍然使用row-fluid 标签的同时修复它？

【问题讨论】：

标签： css twitter-bootstrap responsive-design

【解决方案1】：

为什么不尝试使用输入而不是跨度？

<input class="uneditable-input span1" value="Some value here" />

http://jsfiddle.net/uWbe9/

【讨论】：

通过输入，我现在可以在字段中输入新值并将其设置为 readonly="readonly" 只会使它看起来被禁用。

【解决方案2】：

我认为这是一个 CSS 优先级问题 - 你的 width:100%;正在被其他样式覆盖。要解决此问题，请向其添加另一个类以重新获得最高优先级，即：

.container-fluid .row-fluid [class*="span"] {
width: 100%;
[.. rest of styles here]
}

在前面添加“.container-fluid”再次使其优先。

演示：http://jsfiddle.net/lukem/HA26E/1/

CSS优先规则：http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

【讨论】：