Question

我想把两个下拉列表放在一起。所以我必须在我的表单中有两个下拉列表彼此相邻的行占用与其他输入相同的宽度。我也希望保持责任。我只使用过香草Bootstrap v3.3.7。我一直在搞乱柱子，但不能绕过它。我会从一个乐于助人的灵魂中找到帮助。

我的代码：

@using (Ajax.BeginForm("FormData", "Home", new AjaxOptions { //Lägg till Microsoft.jQuery.Unobtrusive.Ajax om du vill ha formulär utan postback HttpMethod = "POST"}, new { id = "form" })) { @Html.AntiForgeryToken()

<div class="form-horizontal">
  <h4>Arbetsplan</h4>
  <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) @* StartTime *@
  <div id="worktime">
    <div class="form-group">
      @* Hours *@ @Html.LabelFor(model => model.StartTimeHours, new {@class = "control-label col-xs-2 col-sm-2 col-md-2" })
      <div class="col-xs-5 col-sm-5 col-md-5">
        @Html.DropDownListFor(m => m.StartTimeHours, new SelectList(ViewBag.list, "Text", "Value"), new {@class = "form-control"}) @Html.ValidationMessageFor(model => model.StartTimeHours, "", new {@class = "text-danger"})
      </div>
      @* Minutes *@
      <div class="col-xs-5 col-sm-5 col-md-5">
        @Html.DropDownListFor(m => m.StartTimeMinutes, new SelectList(ViewBag.list2, "Text", "Value"), new {@class = "form-control"}) @Html.ValidationMessageFor(model => model.StartTimeMinutes, "", new {@class = "text-danger"})
      </div>

    </div>

    @* EndTime *@
    <div class="form-group">
      @Html.LabelFor(model => model.EndTimeHours, new { @class = "control-label col-xs-2 col-sm-2 col-md-2" }) @* Hours *@
      <div class="col-xs-5 col-sm-5 col-md-5">
        @Html.DropDownListFor(m => m.EndTimeHours, new SelectList(ViewBag.list, "Text", "Value"), new { @class = "form-control", id = "wishTime" }) @Html.ValidationMessageFor(model => model.EndTimeHours, "", new { @class = "text-danger" })
      </div>
      @* Minutes *@
      <div class="col-xs-5 col-sm-5 col-md-5">
        @Html.DropDownListFor(m => m.EndTimeMinutes, new SelectList(ViewBag.list2, "Text", "Value"), new { @class = "form-control", id = "wishTime" }) @Html.ValidationMessageFor(model => model.EndTimeMinutes, "", new { @class = "text-danger" })
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="Submit" id="submitBtn" class="btn btn-default" />
        <input type="button" value="Reset calender" id="clearCal" class="btn btn-default" />
      </div>
    </div>
  </div>
  }

现在看起来像这样：

希望它看起来像这样：

StartTime1和EndTime1应该在一行上，StartTime2和EndTime2在另一行上。如果还有其他任何你想看的东西让我知道。

谢谢！它的工作方式有一半。关于如何使它看起来像上面的图片的任何想法？

通过你的鳕鱼例子，我得到了它的工作。还有一小步。当屏幕达到990px以下时，所有标题都会跳起并将主题自定位于两个下拉列表标题的输入行为之上。留在一边。有没有一种方式让主题也跳起来。 Heres som pics：

991px and above.

991px and under

编辑：

Answer 1

您会发现here是一个有效的例子。

基本上结构如下：

<form class="form-horizontal">

  <div class="form-group">
    <label class="col-sm-2 control-label"></label>
    <div class="col-sm-10">
      //input or select
    </div>
  </div>

  <div class="form-group">
    <label class="col-xs-12 col-sm-2 col-md-2 control-label"></label>
    <div class="col-xs-12 col-sm-5 col-md-5">
      //input or select
    </div>
    <div class="col-xs-12 col-sm-5 col-md-5">
      //input or select
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      // submit button
    </div>
  </div>
</form>

编辑：

您必须更改类：

col-xs-2 col-sm-2 col-md-2
col-xs-5 col-sm-5 col-md-5下拉列表

目前，标签/下拉列表保持相同的比例，因为您为xs sm和md设置的值始终相同。

我建议您为标签设置12，为6尺寸屏幕下方的下拉列表设置991px。

按照this链接查看引导大小类前缀xs sm md lg和px相关联。

编辑：

Example之前的EDIT + 修复标签正确

要修正右侧的标签，您必须将label与包含class="col-xs-12 col-sm-2 col-md-2"

<form class="form-horizontal">

  <div class="form-group">
    <label class="col-sm-2 control-label"></label>
    <div class="col-sm-10">
      //input or select
    </div>
  </div>

  <div class="form-group">
    <div class="col-xs-12 col-sm-2 col-md-2">
      <label class="control-label"></label>
    </div>
    <div class="col-xs-12 col-sm-5 col-md-5">
      //input or select
    </div>
    <div class="col-xs-12 col-sm-5 col-md-5">
      //input or select
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      // submit button
    </div>
  </div>
</form>

Answer 2

您必须与第一个select元素位于同一行的.col元素中的第二个select元素。

<div class="form-group">
    <label class="col-md-2">
        My Label
    </label>

   <!-- 1st select -->
    <div class="col-md-5">
      <select>
          <!-- options -->
      </select>
    </div>

   <!-- 2nd select -->
    <div class="col-md-5">
      <select>
          <!-- options -->
      </select>
    </div>
</div>

更新1

最后，您必须使输入/选择元素的宽度与您的设计相匹配。

Answer 3

我真的不知道这是否会解决你的问题，但在过去的作品中它对我有用，所以试试这个:(从未尝试过使用form-group但尝试过其他类似的事情）

<div class="form-group">
 <div class="col-md-10">
  <div class="col-md-6"> 
   //input field
  </div>
  <div class="col-md-6"> 
   //input field
  </div>
 </div>
</div>

顺便说一句，这与下拉列表无关，只是形式。

Answer 4

如果您正在使用单个屏幕（不推荐），请输入您的输入字段并修改其大小，如果您要使其响应，则使用col作为屏幕。抱歉英语不好。希望这会有所帮助。

如果使用col，则执行此操作。

<div class="form-group col-md-10">
<label class="col-md-2">
</label>
<div class="col-md-3">
  <select>
  </select>
  </div>

<div class="col-md-3">
  <select>
  </select>
</div>
</div>

Bootstrap Dropdown样式

4 个答案: