将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/