C# 使用bootstrap3在mvc表单的同一行中显示find textbox和2下拉列表

我想在同一行中显示一个搜索框、提交按钮和两个下拉框，以便将iPad显示在大屏幕上。如果屏幕小于ipad的尺寸，它将分成2到3行。我试了所有提供的样品，但没有成功。 我正在使用ASP.NET MVC 4。以下是我的代码：

Index.cshtml

<div class="row">
    <div class="abc">
    @using (Html.BeginForm("Contact", "Home", FormMethod.Get, new { id = "f1", @class = "form-inline" }))
    {
        <div class="form-group col-xs-6 col-lg-4">
            <label class="sr-only" for="find-input">Find: </label>
            <div class="input-group ">
                <input type="text" name="filter" value="@ViewBag.filter" class="form-control" placeholder="Search by Product or Description" id="find-input" />
                <span class="input-group-btn ">
                    <button class="btn btn-default" type="submit" onclick="this.form.submit();">Go</button>
                </span>
            </div>
        </div>
        <div class="col-xs-6 col-lg-4">
            <div class="form-group ">
                <div class="input-group ">
                    <label class="control-label " for="sort-drop-down">Sort </label>
                    @Html.DropDownList("sortColumn", ViewBag.SortColumns as SelectList, "", new { onchange = "this.form.submit();", @class = "form-control", id = "sort-drop-down" })
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-lg-4">
            <div class="form-group ">
                <label class="control-label " for="page-size-drop-down">Show </label>
                <div class="input-group ">
                    @Html.DropDownList("pageSize", ViewBag.pageSizes as SelectList, "", new { onchange = "this.form.submit();", @class = "form-control", id = "page-size-drop-down" })
                </div>
            </div>
        </div>
        <input type="hidden" name="viewMode" id="hd1" value="@ViewBag.DisplayMode" />
    }
   </div>
</div>

<div class="container  body-content">
    <form class="form-inline" id="f1" method="get">
        <div class="row">
            <div class="form-group">
                <label class="sr-only" for="find-input">Find: </label>
                <div class="input-group ">
                    <input type="text" name="filter" value="ViewBag.filter" class="form-control" id="find-input" />
                    <span class="input-group-btn ">
                        <button class="btn btn-default" type="submit" onclick="this.form.submit();">Go</button>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label " for="sort-drop-down">Sort </label>
                <div class="input-group ">
                    <select class="form-control" id="sort-drop-down" name="sortColumn" onchange="this.form.submit();">
                        <option selected="selected" value="Id">Id</option>
                        <option value="ProductName">Product Name</option>
                        <option value="Description">Description</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label " for="sort-drop-down">Show: </label>
                <div class="input-group ">
                    <select class="form-control" id="page-size-drop-down" name="pageSize" onchange="this.form.submit();">
                        <option>8</option>
                        <option>12</option>
                        <option>16</option>
                        <option>20</option>
                    </select>
                </div>
            </div>

        </div>
    </form>
</div>

---

有人能帮忙吗？

您刚刚处理了一个大型设备（col lg）或一个超小型设备（xs）的机箱。因此，在定制时，为

md

以及中型设备进行定制

在您的情况下，不要处理它，让外部内联表单类为您处理它

另外，尝试用类容器将行封装在div中。我对.NET不太熟悉，但假设我们正在观察最终获得的html页面

请参见此处的示例输出fiddle

另外，请参见下面的屏幕截图，了解按屏幕调整代码的相同场景

您可以尝试调整html屏幕大小以查看其他设备场景

---

希望有帮助。

如果有人在使用MVC模板时遇到同样的问题，我想展示一下我为解决这个问题所做的工作。@Vinay Prajapati的答案中描述了使用引导html的正确方法。虽然它适用于纯html页面，但当我们使用MVC支架时它不起作用。所以我做了如下的

css

调整

.input-group
{
   display:inline-table;
}
.control-label{
    vertical-align:middle;
}
.form-group .control-label 
{
   margin-top:-15px;
}
.input-group-btn{
   width:auto;
}

调整后的html

<div class="row">
    <div class="abc">
    @using (Html.BeginForm("Contact", "Home", FormMethod.Get, new { id = "f1", @class = "form-inline" }))
    {
        <div class="form-group col-xs-6 col-lg-4">
            <label class="sr-only" for="find-input">Find: </label>
            <div class="input-group ">
                <input type="text" name="filter" value="@ViewBag.filter" class="form-control" placeholder="Search by Product or Description" id="find-input" />
                <span class="input-group-btn ">
                    <button class="btn btn-default" type="submit" onclick="this.form.submit();">Go</button>
                </span>
            </div>
        </div>
        <div class="col-xs-6 col-lg-4">
            <div class="form-group ">
                <div class="input-group ">
                    <label class="control-label " for="sort-drop-down">Sort </label>
                    @Html.DropDownList("sortColumn", ViewBag.SortColumns as SelectList, "", new { onchange = "this.form.submit();", @class = "form-control", id = "sort-drop-down" })
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-lg-4">
            <div class="form-group ">
                <label class="control-label " for="page-size-drop-down">Show </label>
                <div class="input-group ">
                    @Html.DropDownList("pageSize", ViewBag.pageSizes as SelectList, "", new { onchange = "this.form.submit();", @class = "form-control", id = "page-size-drop-down" })
                </div>
            </div>
        </div>
        <input type="hidden" name="viewMode" id="hd1" value="@ViewBag.DisplayMode" />
    }
   </div>
</div>

<div class="container  body-content">
    <form class="form-inline" id="f1" method="get">
        <div class="row">
            <div class="form-group">
                <label class="sr-only" for="find-input">Find: </label>
                <div class="input-group ">
                    <input type="text" name="filter" value="ViewBag.filter" class="form-control" id="find-input" />
                    <span class="input-group-btn ">
                        <button class="btn btn-default" type="submit" onclick="this.form.submit();">Go</button>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label " for="sort-drop-down">Sort </label>
                <div class="input-group ">
                    <select class="form-control" id="sort-drop-down" name="sortColumn" onchange="this.form.submit();">
                        <option selected="selected" value="Id">Id</option>
                        <option value="ProductName">Product Name</option>
                        <option value="Description">Description</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label " for="sort-drop-down">Show: </label>
                <div class="input-group ">
                    <select class="form-control" id="page-size-drop-down" name="pageSize" onchange="this.form.submit();">
                        <option>8</option>
                        <option>12</option>
                        <option>16</option>
                        <option>20</option>
                    </select>
                </div>
            </div>

        </div>
    </form>
</div>

查找：
去
分类
身份证件
品名
描述
展示：
8.
12
16
20

看来您是在笔记本电脑上测试，而不是在ipad或投影仪上测试？@VinayPrajapati，我是在桌面上测试，通过调整大小和使用工具，当我在纯Html（visual studio 2013）中尝试相同的代码时，它工作了。但当我在MVC应用程序中使用它时，它不起作用。我甚至尝试使用razor语法为表单创建相同的代码。这个问题可能还有别的原因。好的！所以，请检查mvc调用后生成的源html。我确信存在一些额外的代码或css导致了问题，例如一些正文或html级别的css更改等。在chrome上，右键单击并单击查看页面源代码，观察是否存在任何问题。你是对的。我把它修好了。我添加了它作为一个答案，希望它将有助于未来的人。