html - 带有输入字段的输入组，选择(silviomoreto)和按钮显示不正确

Question

我目前有一个输入组，包括一个输入字段、一个选择菜单和一个按钮。

我知道您必须在 bootstrap 中使用下拉菜单而不是选择，但我想避免在 javascript 中使用下拉菜单。

我使用的选择菜单来自:https://silviomoreto.github.io/bootstrap-select/examples/所以它不是 Bootstrap 版本，但是我在这里使用 Bootstrap 选择来解决这个问题。

目前选择菜单落在输入字段下方，我不确定为什么会这样，但我希望输入组位于一行上。

我不想给选择一个特定的宽度，因为那行不通，我已经尝试过了，但它只会产生问题，所以如果可以的话，我希望它采用默认宽度。

有什么想法吗？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <form>

    <div class="form-group">
      <h3 id="track-record">Record</h3>
      <div class="col-md-8">
        <div class="input-group select-group">
          <input type="text" class="form-control input-text input-md select-input" id="assessor" placeholder="placeholder here">

          <select id="year-select" class="form-control input-group-addon">
            <option value="">Year</option>
            <option value="1">2014</option>
            <option value="2">2013</option>
            <option value="3">2012</option>
            <option value="4">2011</option>
          </select>


          <span class="input-group-btn">
         <button type="button" class="btn btn-primary btn-sm btn-outline grey-outline"><span class="glyphicon glyphicon-minus"></span>Delete record</button>
          </span>
        </div>
      </div>

    </div>

  </form>
</div>

Answer 1

据我所知，您必须自己完成此操作，我认为 Bootstrap 中不支持使用按钮对多个输入字段进行分组。

其中绝大多数是基于视口(viewport)定义每个输入的边界半径，因为它们被放置在列内(*也删除了填充以将输入保持在一起)。

以下是三个示例，具体取决于您可能希望或不希望在不同设备上处理此问题的方式。

(*确保将代码段打开为整页，然后缩小浏览器以查看更改)

工作示例:

$('.select-group').selectpicker();

/**CSS BELOW THIS LINE IS FOR EXAMPLE ONLY: NOT RELEVANT TO ANSWER**/

body {
  padding-top: 20px;
}
.the-form,
.the-form-2,
.the-form-3 {
  padding: 0 15px;
}
/**CSS ABOVE THIS LINE IS FOR EXAMPLE ONLY: NOT RELEVANT TO ANSWER**/

.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
/**FORM 1**/

@media (min-width: 768px) {
  .the-form .form-control.new-form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
  }
  .the-form .btn-group.bootstrap-select.form-control.select-group,
  .the-form .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {
    border-radius: 0;
  }
  .the-form button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
@media (max-width: 767px) {
  .the-form .btn-group.bootstrap-select.form-control.select-group,
  .the-form .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .the-form button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
/**FORM 2**/

.the-form-2 .form-control.new-form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.the-form-2 .btn-group.bootstrap-select.form-control.select-group,
.the-form-2 .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {
  border-radius: 0;
}
.the-form-2 button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/**FORM 3**/

@media (min-width: 768px) {
  .the-form-3 .form-control.new-form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
  }
  .the-form-3 .btn-group.bootstrap-select.form-control.select-group,
  .the-form-3 .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {
    border-radius: 0;
  }
  .the-form-3 button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
@media (max-width: 767px) {
  .the-form-3 .form-control.new-form-control {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: none;
  }
  .the-form-3 .btn-group.bootstrap-select.form-control.select-group,
  .the-form-3 .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 4px;
  }
  .the-form-3 button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
  }
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<div class="container">
  <h1>Example 1</h1>
  <form class="the-form">
    <div class="row no-gutter">
      <h3 id="track-record">Record</h3>

      <div class="col-xs-12 col-sm-6">
        <input type="text" class="form-control new-form-control" id="assessor" placeholder="Placeholder">
      </div>

      <div class="col-xs-6 col-sm-3">
        <select id="year-select" class="form-control select-group">
          <option value="">Year</option>
          <option value="1">2014</option>
          <option value="2">2013</option>
          <option value="3">2012</option>
          <option value="4">2011</option>
        </select>
      </div>

      <div class="col-xs-6 col-sm-3">
        <button type="button" class="btn btn-primary btn-block">
          <span class="glyphicon glyphicon-minus"></span> Delete Record
        </button>
      </div>

    </div>

  </form>
</div>
<hr>
<div class="container">
  <h1>Example 2</h1>
  <form class="the-form-2">
    <div class="row no-gutter">
      <h3 id="track-record">Record</h3>

      <div class="col-xs-7 col-sm-6">
        <input type="text" class="form-control new-form-control" id="assessor" placeholder="Placeholder">
      </div>

      <div class="col-xs-3 col-sm-3">
        <select id="year-select" class="form-control select-group">
          <option value="">Year</option>
          <option value="1">2014</option>
          <option value="2">2013</option>
          <option value="3">2012</option>
          <option value="4">2011</option>
        </select>
      </div>

      <div class="col-xs-2 col-sm-3">
        <button type="button" class="btn btn-primary btn-block">
          <span class="glyphicon glyphicon-minus"></span>  <span class="hidden-xs">Delete Record</span>
        </button>
      </div>

      <span class="help-block text-right visible-xs">Delete Record</span>

    </div>

  </form>
</div>
<hr>
<div class="container">
  <h1>Example 3</h1>
  <form class="the-form-3">
    <div class="row no-gutter">
      <h3 id="track-record">Record</h3>

      <div class="col-xs-12 col-sm-6">
        <input type="text" class="form-control new-form-control" id="assessor" placeholder="Placeholder">
      </div>

      <div class="col-xs-6 col-sm-3">
        <select id="year-select" class="form-control select-group">
          <option value="">Year</option>
          <option value="1">2014</option>
          <option value="2">2013</option>
          <option value="3">2012</option>
          <option value="4">2011</option>
        </select>
      </div>

      <div class="col-xs-6 col-sm-3">
        <button type="button" class="btn btn-primary btn-block">
          <span class="glyphicon glyphicon-minus"></span> Delete Record
        </button>
      </div>

    </div>

  </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>