Bootstrap - 类行不能正常工作

Question

我在服务器中发布了我的应用程序，对于特定用户，字段的布局不是更好，如下图所示：

黄色区域变空并且突破到新线。

我的代码是：

<div class="row">
  <div class="col-sm-5 col-md-4 col-lg-3">
    <div class="form-group">
      <label>Período</label>
      <div class="input-group">
        @Html.TextBoxFor(model => model.Parametros.DT_INICIO, new { @id = "txt-dtInicio", @class = "form-control input-sm" })
        <span class="input-group-addon">Até</span>
        @Html.TextBoxFor(model => model.Parametros.DT_FIM, new { @id = "txt-dtFim", @class = "form-control input-sm" })
      </div>
    </div>
  </div>
  <div class="col-sm-7 col-md-6 col-lg-5">
    <div class="form-group">
      <label>Equipamento</label>
      @Html.DropDownListFor(model => model.Parametros.COD_EQPMT_PRODC, Model.ListaEquipamentos, "Selecione o equipamento", new { @id = "ddl-Equipamento", @class = "form-control input-sm selectpicker", data_live_search = "true" })
    </div>
  </div>
  <div class="col-sm-3 col-md-2 col-lg-1">
    <div class="form-group">
      <label>Tipo Aço</label>
      @Html.TextBoxFor(model => model.Parametros.COD_TIPO_ACO, new { @id = "txt-Tipo-Aco", @class = "form-control input-sm", @maxlength = "5" })
    </div>
  </div>
  <div class="col-sm-3 col-md-2 col-lg-1">
    <div class="form-group">
      <label>Grupo</label>
      @Html.DropDownListFor(model => model.Parametros.GRUPO_PROAC, Model.ListaGrupos, "", new { @id = "ddl-Grupo", @class = "form-control input-sm"})
    </div>
  </div>
  <div class="col-sm-3 col-md-2 col-lg-1">
    <div class="form-group">
      <label>Truno</label>
      @Html.DropDownListFor(model => model.Parametros.TUR_FIM_PROCE, Model.ListaTurnos, "", new { @id = "ddl-Turno", @class = "form-control input-sm"})
    </div>
  </div>
  <div class="col-sm-4 col-md-3 col-lg-2">
    <div class="form-group">
      <label>U.M.</label>
      @Html.TextBoxFor(model => model.Parametros.COD_IDENT_UNMET, new { @id = "txt-UM", @class = "form-control input-sm", @maxlength = "12" })
    </div>
  </div>
  <div class="col-sm-4 col-md-3 col-lg-2">
    <div class="form-group">
      <label>Espessura Inicial</label>
      @Html.TextBoxFor(model => model.Parametros.ESP_MM_INI, new { @id = "txt-Esp-Inicial", @class = "form-control input-sm"})
    </div>
  </div>
  <div class="col-sm-4 col-md-3 col-lg-2">
    <div class="form-group">
      <label>Espessura Final</label>
      @Html.TextBoxFor(model => model.Parametros.ESP_MM_FIM, new { @id = "txt-Esp-Final", @class = "form-control input-sm"})
    </div>
  </div>
  <div class="col-sm-3 col-md-2 col-lg-1">
    <div class="form-group">
      <label>T3</label>
      @Html.TextBoxFor(model => model.Parametros.T3, new { @id = "txt-T3", @class = "form-control input-sm"})
    </div>
  </div>
</div>

我的电脑，例如，屏幕正确呈现。

Answer 1

黄色间隙是由于高度差异造成的，而不是因为您有超过12个列单位。

当<div class="col-xs-12"> <form class="navbar-form " action="/results/" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> 的内容高度不同时，会发生uneven break that's causing the gap。只要您了解额外的col-* wrap to a new line，就可以在单个.row元素中使用超过12个col单位。

我发现您正在使用col-*，这可能导致该select元素与其他selectpicker输入的高度不同。我无法用标准输入重新创建它。检查可能导致form-control变为不同高度的其他CSS。

http://www.codeply.com/go/SV2tXWa2BF