1

.span1テキストフィールドがルールに従わないのはなぜですか? 修正するにはどうすればよいですか?

http://jsfiddle.net/aurorius/aNRBn/

<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しかし、まだタグを使用している間にどうすれば修正できますか?

4

2 に答える 2

0

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/

于 2012-05-31T20:22:18.587 に答える
0

スパンの代わりに入力を使用してみませんか?

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

http://jsfiddle.net/uWbe9/

于 2012-05-27T04:47:07.120 に答える