使用Bootstrap在GSP上单选按钮显示奇怪

Question

我正在尝试创建一个表单，用户可以在其中输入信息，并且可以保存值。我正在使用Groovy和Bootstrap，但无法按我的意愿显示我的Radio Group。

我希望Radio Group位于“有客户对通知表示感兴趣”标签的直接右侧，然后我希望看到带有小空格的单选按钮，然后是按钮标签。

示例（忽略句点）：

表达兴趣：......... o是

..................................... o o否

..................................... o未知

这是我目前在.gsp上使用的代码

<div class="col-sm-12" style="margin-bottom: 0.5cm">
    <div class="col-sm-12">
        <div class="row top-margin">
            <div class="col-sm-2">
                <label class="control-label col-sm-6" style="font-weight: normal;" for="customerAlert">
                    Has customer expressed interest in notification:
                </label>
            </div>
            <div class="col-sm-4" style="margin-bottom: 0.5cm">
                <g:radioGroup name="customerAlert" labels="['Yes','No','Unknown']" values="['1','2','3']" value="${customerAlert}">
                    ${it.radio } ${it.label}
                </g:radioGroup>
            </div>
        </div>
    </div>
</div>

-

以下是上面的代码显示我的单选按钮的方式：