將btn-group與其他窗體控件輸入字段對齊

Question

我正在使用Bootstrap爲Web應用程序創建輸入字段。

我使用btn-group來創建3個選擇的分段控制（供用戶選擇他們的性別）。不幸的是，我無法讓它表現出我想要的。

我無法使按鈕組與其他（文本，電子郵件）輸入字段在視覺上保持一致。我希望這個控件的寬度與其他字段的寬度相同，3個選項中的每一個都是相同的寬度，每個寬度都是整個寬度的1/3。

• 我試過應用form-control類。它得到正確的大小，但它創建了一個重複的大綱。

• 我試過將按鈕組設置爲100％寬度，每個按鈕的寬度都是33％。當我檢查按鈕組時，它是正確的寬度，但大部分是空白區域，而且兒童的寬度不受影響。

  男 女 其他

下面是它目前的樣子：

這裏是理想的結果的粗略實物模型：

這裏的jsfiddle。

我該如何做到這一點？謝謝。

Answer 1

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

https://jsfiddle.net/gcsru9go/