Bootstrap 3：在下拉控件旁边放置一个链接答案

【问题标题】：Bootstrap 3: placing a link beside a dropdown controlBootstrap 3：在下拉控件旁边放置一个链接
【发布时间】：2015-02-19 16:47:08
【问题描述】：

我正在尝试通过指向“功能”页面的链接来帮助访问者选择合适的产品版本。我无法将Compare features 链接完全放在下拉控件旁边。

你知道怎么做吗？

谢谢。

@using (Html.BeginForm("Index", "Store", FormMethod.Post, new { id = "productForm", @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <div class="form-group">
        @Html.Label("Edition", new { @class = "col-md-2 control-label"})
        <div class="col-md-10">
            @Html.DropDownList("edition", (List<SelectListItem>)@ViewBag.PossibleEditions, new { @class = "form-control", onchange="this.form.submit();" })
        </div>
        @Html.ActionLink("Compare features", "Features", "ProductName", null, new { @class = "???" })
    </div>

【问题讨论】：

你能包含你渲染的html吗？

标签： css asp.net-mvc twitter-bootstrap

【解决方案1】：

Bootstrap 使用基于列的布局。您总是有 12 列可供使用。由于您使用两列作为标签和 10 列作为下拉列表，因此您无法在下拉列表旁边显示链接。您必须为下拉列表使用更少的列。

<div class="form-group">
    @Html.Label("Edition", new { @class = "col-md-2 control-label"})
    <div class="col-md-7">
        @Html.DropDownList("edition", (List<SelectListItem>)@ViewBag.PossibleEditions, new { @class = "form-control", onchange="this.form.submit();" })
    </div>
    <div class="col-md-3">
        @Html.ActionLink("Compare features", "Features", "ProductName", null, new { @class = "???" })
    </div>
</div>

【讨论】：

【解决方案2】：

请你试试下面这个。您可以根据需要改变行内的 col-md

@using (Html.BeginForm("Index", "Store", FormMethod.Post, new { id = "productForm", @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <div class="form-group">
        @Html.Label("Edition", new { @class = "col-md-2 control-label"})
        <div class="col-md-10">
           <div class="row">
             <div class="col-md-3">
               @Html.DropDownList("edition", (List<SelectListItem>)@ViewBag.PossibleEditions, new { @class = "form-control", onchange="this.form.submit();" })
             </div>
             <div class="col-md-2">
               @Html.ActionLink("Compare features", "Features", "ProductName", null, new { @class = "???" })
             </div>
           </div>
        </div>
    </div>
}

【讨论】：