尝试在同一行中添加一些自定义单选按钮和超链接时，我似乎在引导程序中遇到了问题。看起来我可以让超链接工作或打开数据切换，以便单选按钮单击;但不能两者兼而有之，或者至少不能同时具有标准 COL 结构。我假设我做错了什么，但无法弄清楚。

单选按钮工作的代码；但是对于超链接，您可以悬停（并查看正确的URL），您可以右键单击并在新窗口中打开（并且有效），但单击链接不会做任何事情（停留在页面上，没有操作）

<div class="container">
            <div class="row align-content-center">
                <div class="col text-center d-none d-md-block"><h4>Column One</h4></div>
                <div class="col text-center"><h4>Column Two</h4></div>
                <div class="col text-center"><h4>Column Three</h4></div>
                <div class="col text-center"><h4>Column Four</h4></div>
            </div>

            <div class="row align-content-center btn-group btn-group-toggle" data-toggle="buttons">
                <div class="col text-center d-none d-md-block"><h4>Column One</h4></div>
                <div class="col text-center">
                    <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option1" value="1" autocomplete="off" />
                        Option One
                    </label>
                </div>
                <div class="col text-center">
                    <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option2" value="2" autocomplete="off" />
                        Option Two
                    </label>
                </div>
                <div class="col text-center">
                    <a asp-area="" asp-controller="Home" asp-action="Index">
                        <img src="~/img/home.png" alt="Home Page" title="Home Page" />
                    </a>
                </div>
            </div>

            <div class="row align-content-center btn-group btn-group-toggle" data-toggle="buttons">
                <div class="col text-center d-none d-md-block"><h4>Column One</h4></div>
                <div class="col text-center">
                    <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option1" value="1" autocomplete="off" />
                        Option One
                    </label>
                </div>
                <div class="col text-center">
                    <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option2" value="2" autocomplete="off" />
                        Option Two
                    </label>
                </div>
                <div class="col text-center">
                    <a asp-area="" asp-controller="Home" asp-action="Index">
                        <img src="~/img/home.png" alt="Home Page" title="Home Page" />
                    </a>
                </div>
            </div>
        </div>

超链接工作的代码；但是单选按钮在被点击时不会“保持开启”

            <div class="container">
            <div class="row align-content-center">
                <div class="col text-center d-none d-md-block"><h4>Column One</h4></div>
                <div class="col text-center"><h4>Column Two</h4></div>
                <div class="col text-center"><h4>Column Three</h4></div>
                <div class="col text-center"><h4>Column Four</h4></div>
            </div>

            <div class="row align-content-center">
                <div class="col text-center d-none d-md-block"><h4>Column One</h4></div>
                <div class="col text-center">
                    <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option1" value="1" autocomplete="off" />
                        Option One
                    </label>
                </div>
                <div class="col text-center">
                    <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option2" value="2" autocomplete="off" />
                        Option Two
                    </label>
                </div>
                <div class="col text-center">
                    <a asp-area="" asp-controller="Home" asp-action="Index">
                        <img src="~/img/home.png" alt="Home Page" title="Home Page" />
                    </a>
                </div>
            </div>

            <div class="row align-content-center">
                <div class="col text-center d-none d-md-block"><h4>Column One</h4></div>
                <div class="col text-center">
                    <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option1" value="1" autocomplete="off" />
                        Option One
                    </label>
                </div>
                <div class="col text-center">
                    <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option2" value="2" autocomplete="off" />
                        Option Two
                    </label>
                </div>
                <div class="col text-center">
                    <a asp-area="" asp-controller="Home" asp-action="Index">
                        <img src="~/img/home.png" alt="Home Page" title="Home Page" />
                    </a>
                </div>
            </div>
        </div>

您可以看到不同之处在于div中带有“BTN-group BTN-group-toggle”data-toggle = " buttons "的行

我尝试过的另一种方法是添加一个div，其中数据切换仅围绕单选按钮；这使它们超链接工作，但堆叠单选按钮/没有所需的col布局。