Question

我在我的表单上使用bootstrap select。就在下面，我有一个输入框。我想输入框的宽度类似于选择框。

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <select class="selectpicker">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2">
    </div>
    <div class="col-md-8">
      <input class="form-control" id="input_id" type="text" value="" />
    </div>
    <div class="col-md-2">
    </div>
  </div>
</div>

请参阅：https://jsfiddle.net/5L30q27f/8/

在bootstrap-select.css中，似乎宽度已设置为220px。我可以使用输入框的确切宽度，但我认为这不是一个好主意，因为我怀疑在移动设备上bootstrap-select可能会将该宽度更改为其他内容。

目前，我使用列控制输入框的宽度，但它不是正确的解决方案。（宽度似乎因屏幕尺寸而异）。

我第一次使用bootstarp。所以我很有可能忽略了一些由bootstrap提供的明显的东西来解决这个问题。

请你指点一个正确的方向吗？

Answer 1

Bootstrap有几个选项可根据屏幕大小http://getbootstrap.com/css/#grid-options设置元素的宽度。更改网格以使用小提琴中的xs选项可获得所需的结果。

https://jsfiddle.net/5L30q27f/9/

如何使用输入框对齐（宽度方向）bootstrap选择下拉列表？

1 个答案: