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

Question

所以我在这里有两个单选按钮，我正在尝试将它们链接起来。由于它们位于两个不同的forms 中，因此它们似乎没有按我预期的那样工作。 forms 是 required in Bootstrap，以便显示我想要的正确样式。这是我的代码的 sn-p：

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

DEMO