链接两个不同形式的单选按钮

Question

所以我这里有两个单选按钮，我正在尝试将它们链接起来。由于它们处于两种不同的form，它们似乎没有像我预期的那样工作。Bootstrap 中需要 form s，以便显示我想要的正确样式。这是我的代码片段：

<ul class="list-group">
    <li class="list-group-item list-heading">Notification Display Options</li>
    <li class="list-group-item">
        <form class="form-inline" role="form">
            <div class="radio">
                <label>
                    <input type="radio" id="noti_display_time" name="noti_display"> <span trans="shownotificationfor">Shows for</span>
                    <div class="form-group">
                        <input id="show_noti_time" type="number" class="form-control" max="60" min="1" data-requires="noti_display_time">
                    </div>  <span trans="seconds">seconds</span>
                </label>
            </div>
        </form>
    </li>
    <li class="list-group-item">
        <form class="form-inline" role="form">
            <div class="radio">
                <label>
                    <input type="radio" name="noti_display">Close manually
                </label>
            </div>
        </form>
    </li>
</ul>

http://jsfiddle.net/DerekL/4YfB9/show（不要在jsFiddle预览窗口中查看它，因为样式会随着窗口大小的变化而变化）

有没有办法在不弄乱风格的情况下解决这个问题？谢谢。

如果没有解决方法，JavaScript 将是我最后的手段。

Answer 1

只需将

一个表单包裹在<ul>上即可。仅使用 2 个表单来管理样式没有多大意义。

<form> 
   <ul/>
</form>

演示