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/