2016-07-13 10 views
1

私はブートストラップを使ってWebアプリケーションの入力フィールドを作成しています。他のフォームコントロールの入力フィールドにbtn-groupを合わせる

私はbtn-groupを使用して、3つの選択肢のセグメンテーションコントロールを作成しています(ユーザーがセックスを選択するため)。残念ながら、私はそれが私の好きな振る舞いをすることはできません。

ボタングループを他の(テキスト、電子メール)入力フィールドと視覚的に一致させることはできません。私はこのコントロールを他のフィールドと同じ幅にしたいと思います。3つの選択肢のそれぞれが同じ幅で、それぞれ全体の幅の1/3です。

  • 私はform-controlクラスを適用しようとしました。適切なサイズになりますが、アウトラインは重複して作成されます。
  • ボタングループを100%幅に設定しようとしましたが、各ボタンの幅は33%です。ボタングループを調べると、それは正しい幅ですが、そのほとんどは空白で、子の幅は影響を受けません。

    男性 女性 その他

は、ここでは、現在どのように見えるかです:

currently

は、ここで望ましい結果の大まかなモックアップだ:

desired

ここjsfiddleです。

どうすればこの問題を解決できますか?ありがとう。

答えて

2
<div style="width: 100%" class="btn-group btn-group-justified" data-toggle="buttons"> 

https://jsfiddle.net/gcsru9go/

+0

ありがとう! 15分後に私はあなたの答えを受け入れるでしょう。これについてあなたがどのように知っていたか尋ねてもいいですか?利用可能なすべてのクラスをリストしたドキュメントを知っていますか? – Alexander

+0

http://getbootstrap.com/components/私はそれがすべてのものをリストアップしているかどうかはわかりませんが、それは1つです – JDro04

+0

私はそのページにいました!どのように私はそれを逃すことができたのだろうか。ありがとう! – Alexander

関連する問題