html - "Bootstrap Form Input"按钮旁边？

Question

我的最终目标是有一个按钮，一个<select>右侧看起来像普通 Bootstrap 输入字段的下拉列表(因此它与所有屏幕尺寸上的其他 UI 元素相匹配)。

class="form-control input-md"

我想在输入上使用上面的 css，以便它获得 Bootstrap 表单输入的颜色、边框等。我不希望它占据整个屏幕宽度，有很大的边距，或者掉到下一行。我修复了部分问题:

.my-modified-input {
    margin:0px;
    width: 250px;
}

但是，输入仍然跳转到下一行。有没有办法在不使用 Bootstrap 网格的情况下防止这种情况发生？我不想使用网格，因为按钮和选择下拉列表之间的间距变得太宽，而没有为每个屏幕尺寸在具有自定义列的行内制作行。

Answer 1

你必须使用 form-inline 类。

<form class="form-inline">
      <div class="form-group">
        <button class="btn btn-primary">
          Button
        </button>
      </div>
      <div class="form-group">
        <select class="form-control">
          <option value="">here is your select</option>
        </select>
      </div>

    </form>

https://jsfiddle.net/bjw1gLv2/