引导 3 个单选按钮到按钮 ASP.NET MVC 下无法完全正常工作

详细信息：

• ASP.NET 4.5.1
• MVC 5
• 由 BrockAllen 标识重启 2 扩展的实体框架 6
• 通过 NuGet 引导 3.3.6

我正在查看复选框和单选按钮功能。我理解里面有label的div。我知道input和相关文本都需要在label内。

当我将input放在label外部并将 for= 属性添加到标签时，单选按钮出现在引导按钮之外，单击引导按钮会将选择切换到正确的单选按钮到正确的引导按钮。因此，到目前为止一切顺利;引导按钮似乎正确影响了基础单选按钮。

但是，没有发生的是引导按钮本身会更改以显示此状态更改。例如，如果我单击通常未选择的按钮，则active类不会从所选按钮切换，而是按照上面的链接示例最终出现在未选择的按钮上。

由于我的 MVC 代码有些毛茸茸的(并且与 Bootstrap 项本身的性能无关(，因此我暂时将其排除在外，并专注于 MVC 代码输出到浏览器的内容(因为这很重要(。

以下是我生成的输出：

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary" for="G1Q1_DirectedToImplement2">
    <input id="G1Q1_DirectedToImplement2" type="radio" value="e1c8c5ba-e7ce-e511-8265-14feb5fbeae8" name="G1Q1_DirectedToImplement" autocomplete="off">
    Yes
  </label>
  <label class="btn btn-primary active" for="G1Q1_DirectedToImplement1">
    <input id="G1Q1_DirectedToImplement1" type="radio" value="1876ce88-e7ce-e511-8265-14feb5fbeae8" name="G1Q1_DirectedToImplement" checked="" autocomplete="off">
    No
  </label>
</div>

奇怪的是，当我在jsfiddle上将这个HTML插入类似此示例的东西时，它可以工作。这让我怀疑，虽然生成的HTML(div，label和input(是正确的，但我未能在其他地方设置正确的东西。我的页面标题是这样的：

<link rel="stylesheet" href="/Content/Themes/Base/core.css">
<link rel="stylesheet" href="/Content/Themes/Base/accordion.css">
<link rel="stylesheet" href="/Content/Themes/Base/all.css">
<link rel="stylesheet" href="/Content/Themes/Base/button.css">
<link rel="stylesheet" href="/Content/Themes/Base/datepicker.css">
<link rel="stylesheet" href="/Content/Themes/Base/dialog.css">
<link rel="stylesheet" href="/Content/Themes/Base/draggable.css">
<link rel="stylesheet" href="/Content/Themes/Base/progressbar.css">
<link rel="stylesheet" href="/Content/Themes/Base/selectable.css">
<link rel="stylesheet" href="/Content/Themes/Base/selectmenu.css">
<link rel="stylesheet" href="/Content/Themes/Base/slider.css">
<link rel="stylesheet" href="/Content/Themes/Base/sortable.css">
<link rel="stylesheet" href="/Content/Themes/Base/spinner.css">
<link rel="stylesheet" href="/Content/Themes/Base/tabs.css">
<link rel="stylesheet" href="/Content/Themes/Base/tooltip.css">
<link rel="stylesheet" href="/Content/Themes/Base/theme.css">
<link rel="stylesheet" href="/Content/bootstrap.css">
<link rel="stylesheet" href="/Content/site.css">
<script src="/Scripts/modernizr-2.8.3.js">
<script src="/Scripts/bootstrap.js">
<script src="/Scripts/respond.js">
<script src="/Scripts/jquery-2.2.0.js">
<script src="/Scripts/jquery-ui-1.11.4.js">
<script src="/Scripts/jquery.validate.js">
<script src="/Scripts/jquery.validate.unobtrusive.js">
<script src="/Scripts/jquery.generics.js">

最后一个脚本文件条目是手动创建的jQuery自定义代码(例如Firefox的弹出日历(的全部内容。Bootstrap 已正确链接到，因为我能够从 Firebug 下的 HTML 源代码中展开脚本条目，这表明其内容已被浏览器成功下载。

我的印象是，我所要做的就是用正确的类和辅助属性装饰 HTML，我可以随意引入特定的 Bootstrap 功能，而不必通过 JavaScript 处理程序在其他地方触发它。我的印象正确吗？还是我只是没有正确设置？