Question

为什么文本字段不符合.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标记时修复它？

Answer 1

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

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

http://jsfiddle.net/uWbe9/

Answer 2

我认为这是一个CSS优先问题 - 你的宽度：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/

具有响应式布局的表单

2 个答案: