Question

我正在努力制作两个razor dropdownList (may be more) on line (row)。我对bootstrap不是很熟悉。感谢有人可以指导我解决我的问题。

我的剃刀代码：

@using (Html.BeginForm("Index", "Donor", FormMethod.Get))
{
    <div class="row">
        Blood Group:    @Html.DropDownList("bloodGroupDD", ViewBag.lstBloodGroup as IEnumerable<SelectListItem>, "Blood Group", new { @class = "form-control" })
        City:           @Html.DropDownList("cityDD", ViewBag.lstGroupCity as IEnumerable<SelectListItem>, "Select City", new { @class = "form-control" })
        <input type="submit" value="Search" />
    </div>
}

如下图所示，两个下拉列表都在不同的行（行）上。我不想要这个。我想要两个在同一行/行。

Answer 1

添加

display: inline;

这两个下降的风格。

Answer 2

你可以在div中使用class =“row”添加其他div，如果你想要相同的宽度，可以在每个div上使用colst -dd-4等引导列类。

您可以使用此更改每列的宽度。

Answer 3

您可以通过多种方式检查此代码段

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="dropdown" style="display:inline">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
   <div class="dropdown" style="display:inline">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>

Answer 4

如前所述，您可以使用'row'和'col-md-4'。这是一个使用剃刀的工作代码。

在https://dotnetfiddle.net/WpsdIK中查找相同内容（全屏查看结果）

@using (Html.BeginForm("Index", "Donor", FormMethod.Get))
{
  <div class="row">
    <div class='col-md-4'>
        Blood Group:    @Html.DropDownList("bloodGroupDD", ViewBag.lstBloodGroup as IEnumerable<SelectListItem>, "Blood Group", new { @class = "form-control" })
    </div>
    <div class='col-md-4'> 
        City:           @Html.DropDownList("cityDD", ViewBag.lstGroupCity as IEnumerable<SelectListItem>, "Select City", new { @class = "form-control" })
    </div>
    <input type="submit" value="Search" />
  </div>
}

Answer 5

    @using (Html.BeginForm("Index", "Donor", FormMethod.Get))
{
    <div class="row" id="row_1">
        Blood Group:    @Html.DropDownList("bloodGroupDD", ViewBag.lstBloodGroup as IEnumerable<SelectListItem>, "Blood Group", new { @class = "form-control" })
        City:           @Html.DropDownList("cityDD", ViewBag.lstGroupCity as IEnumerable<SelectListItem>, "Select City", new { @class = "form-control" })
    </div>
    <div class="row">
        <input type="submit" value="Search" />
    </div>
}

$("#row_1").child().css("display","inline");

在同一行/行上创建多个DropdownList

5 个答案: