2017-09-28 3 views
1

내가 같은 행 뭔가를 만들려고하고 아래와 같이 부트 스트랩 텍스트 입력의 너비를 조정 반작용

/* 
    * The render method of this component 
    */ 
    render() { 
     return (
     <form className="form-inline"> 
      <FormGroup> 
       <InputGroup> 
       <InputGroup.Addon> 
       <input name="cb" type="checkbox" value={this.state.cb} onChange={this.handleInputChange} /> 
       </InputGroup.Addon> 
       <div> 
       <FormControl name="remarks" type="text" value={this.state.remarks} onChange={this.handleInputChange} /> 
       <FormControl name="amount" type="text" value={this.state.amount} onChange={this.handleInputChange} /> 
       </div> 
       </InputGroup> 
      </FormGroup> 
     </form> 
    ); 
    } 
} 

문제는 "입력 텍스트 유형"필드의 너비을 늘리고 싶지만 CSS 챔피언이 아니 어서 늘릴 수 없습니다. 인터넷 검색 및 좌절의 꽤 오랜 시간이 지난 후 여기에서 물어보십시오 :)

누구든지 도와 줄 수 있습니까? 감사합니다

+0

얘들 아, 도움이 필요 하신가요? css 사람들을 위해 간단해야합니다 :) –

답변

2

그리고 그래 난이 해결책 가지고 :

바와 같이 here을 설명

:

사용자 정의 폭을 필요로 수를 : 입력 및 선택 폭이 : 100 %; 부트 스트랩에 기본적으로 이 적용되었습니다. 인라인 양식 내에서 너비를 다시 설정합니다 : auto; 따라서 여러 컨트롤이 같은 줄에있을 수 있습니다. 레이아웃에 따라 추가 사용자 정의 너비가 필요할 수 있습니다.

그래서, 하나는 자신의 폭을 조정하는 모든 요소에 사용자 지정의 폭을 제공 할 수있다 따라서 나는 CSS 다음 사용 :

.form-inline { 
    width: 100%; 
} 

.form-group { 
    width: 90%; 
} 

.input-group { 
    width: 90% !important; 
} 

.form-control { 
    width: 50% !important; 
} 

span.input-group-addon { 
    width: 50px !important; 
} 

내 테이블에 대한 좋은 찾고 폭을 달성하기 위해 :

enter image description here