は、ブートストラップは、私は、以下に示すような行に何かを作成しようとしているテキスト入力

Question

の幅を調整リアクト：以下

は私が「行」のためのコンポーネントのコードを反応させるのである。

/* 
    * 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チャンピオンではないかもしれませんが、私はそれを増やすことができません。グーグルとフラストレーションのかなりの時間後にここにお問い合わせください:)

誰かが助けてください？おかげ

Answer 1

そして、はい、私は解決策を得た：

としては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; 
} 

私のテーブルのための格好良い幅を達成するために：