按钮旁边的“Bootstrap Form Input”？

Question

我的最终目标是拥有一个按钮，以及一个<select>下拉列表，它看起来就像它右边的正常引导输入字段（因此它匹配所有屏幕尺寸上的其他UI元素）。

class="form-control input-md"

我想在输入上使用上面的css，以便获取引导程序表单输入的颜色，边框等。我不希望它占据整个屏幕宽度，有很大的余量，或者下降到下一行。我将其部分修复：

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

Answer 2

<form class="form-horizontal" role="form">
 <div class="form-group">
   <div class=" col-sm-4" >
     <button class="btn btn-primary btn-block">Click me</button>
   </div>
   <div class="col-sm-8">
      <select class="form-control">
       <option>1</option>
      </select>
   </div>
 </div>
</form>

希望这会帮助你。