Question

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

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

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

目前，选择菜单位于输入字段下方，我不知道为什么会这样做，但我希望输入组位于一行。

我不想给选择一个特定的宽度，因为它不起作用，我已经尝试过它只会产生问题，所以我希望它能够采用它们的默认宽度。

有什么想法吗？

＆＃13;

<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>

＆＃13;

Answer 1

据我所知，你必须自己做，我不相信Bootstrap中有任何本机支持，可以用按钮对多个输入字段进行分组。

绝大多数是根据视口定义每个输入的边界半径，因为它们放在列中（*也删除了填充以保持输入在一起）。

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

（*确保将代码段打开到整页，然后减少浏览器以查看更改）

工作示例：

stepOutRequest

$('.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;
  }
}

带输入字段的输入组，选择（silviomoreto）和按钮无法正确显示

1 个答案: