Переключатель отображает странное на GSP с помощью начальной загрузки

Question

Я пытаюсь создать форму, в которую пользователи могут вводить информацию, и я могу сохранить значения.Я использую Groovy и Bootstrap и не могу отобразить свою группу радиостанций так, как мне бы этого хотелось.

Я бы хотел, чтобы Радиогруппа находилась справа от ярлыка «Проявил ли заказчик интерес к уведомлению:», а затем я хотел бы видеть переключатель с небольшим пробелом, а затем ярлык кнопки.

Пример (игнорирование периодов):

Экспресс-процент: ......... 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>

-

Вот как в приведенном выше коде отображается мой переключатель: