입력 추가 클래스가 유체 격자의 입력 너비를 분할하는 이유는 무엇입니까?

Question

나는 다음과 같은 HTML이 :

<div class="container-fluid"> 
<div class="row-fluid"> 
    <div class="span8"> 
     <form class="form-horizontal"> 
      <div class="control-group"> 
       <label class="control-label">Field 1</label> 
      <div class="controls"> 
       <input type="text" /> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label">Field 2</label> 
      <div class="controls"> 
       <div class="input-append"> 
       <input type="text" /> 
        <span class="add-on">%</span> 
       </div> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

다음과 같은 스타일 :

입력 { 폭 : 100 %; }

필드 1의 입력 상자가 예상대로 작동합니다. 그러나 필드 2는 고정 폭을 갖는 것으로 보입니다. 왜 이런 일이 일어나고 그것을 고칠 수있는 방법이 있습니까? 다른 텍스트 필드와 일치하도록 범위 내에서 동일한 100 % 너비로 입력되도록 추가하고 싶습니다. 여기

예 : 때문에 두 번째 입력에의 http://jsfiddle.net/PilotBob/erT7d/

Answer 1

, 당신은 당신이 생각하는 것보다 작은 다른 용기, .input-append을 보유하고 있습니다. 부트 스트랩은 inline-block-block에서 classinput-append이있는 div의 기본 display 값을 변경하기 때문에

뿐만 아니라 width:100%;에 solved this problem.

Answer 2

그것을 설정이 문제가 발생합니다.

width:100%의 입력 폭은 보통과 같지만 add-on은 오버플로하거나 width:95%이되도록 설정할 수 있습니다.

First solution with width:100%

Second solution with width:95%

Answer 3

나는이 파일을 저장하고 실행했다. 문제점을 찾지 못했습니다

<style> 
input{width: 100%;} 
</style> 
<div class="container-fluid"> 
<div class="row-fluid"> 
<div class="span8"> 
    <form class="form-horizontal"> 
     <div class="control-group"> 
      <label class="control-label">Field 1</label> 
     <div class="controls"> 
      <input type="text" /> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">Field 2</label> 
     <div class="controls"> 
      <div class="input-append"> 
      <input type="text" /> 
       <span class="add-on">%</span> 
      </div> 
      </div> 
     </div> 
    </form> 
    </div> 
</div> 

그러나 언급 된 URL에서 작동하지 않는 이유는 무엇입니까? 이 문제를 만드는 다른 곳에있는 경우가, 몇 가지 이유

1. 부족 컨테이너 폭을 부모 또는 컨테이너 폭이 당신이 CSS를 나중에 폭을 덮어 쓸 수있다 문제
2. 를 해결할 생략, "입력을 사용할 수 있습니다 {width : 100 %! importtant;} "