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