如何使引导内联表单中的一个表单控件或输入组扩展？

Question

我有一个现在看起来像这样的表单：

我希望它看起来像这样，即第二个表单控件（或在本例中为输入组）尽可能地扩展，同时让选择找到它内部文本的自然大小：

当然，以流畅的方式适用于所有屏幕（足够宽）。这个表格的代码是这样的：

<form class="form-inline role="form">
  <select class="form-control" id="q_radius" name="q[radius]">
    <option value="5">Jobs within 5 miles of</option><!-- more options -->
  </select>
  <div class="input-group">
    <input class="form-control" id="q_address" name="q[address]" type="text" value="London Bridge, United Kingdom">
    <span class="input-group-btn">
       <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
    </span>
  </div>
</form>

这是使用 Bootstrap 3.1。

这可能吗？我认为不是，但我想在认为不可能之前与其他人核实一下。

Answer 1

这是另一种方法.. 使用display:inline

  <form class="form-inline" role="form">
    <div class="form-group pull-left"> 
    <select class="form-control" id="q_radius" name="q">
      <option value="5">Jobs within 5 miles of</option>
    </select>&nbsp;
    </div>
    <div class="form-group" style="display:inline;">
      <div class="input-group">
        <input class="form-control" id="q_address" name="a" type="text" value="London Bridge, United Kingdom">
        <span class="input-group-btn">
           <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
        </span>
      </div>
    </div>
  </form>

http://www.bootply.com/gjjuyGKAwf

这种方法没有将表单控件包装在 Bootstrap 的网格col-* 中产生的差距@

Answer 2

您可以利用引导程序grid 系统来 完成你想要的。

我在您的表单中添加了一个引导行，然后添加了 2 个中等列。

HTML

 <form class="form-inline">
     <div class="row">
         <div class="col-md-2">
             <select class="form-control" id="q_radius" name="q[radius]">
                <option value="5">Jobs within 5 miles of</option><!-- more options -->
             </select>
         </div>
         <div class="col-md-9">
             <div class="input-group">
                <input class="form-control" id="q_address" name="q[address]" type="text" value="London Bridge, United Kingdom">
                <span class="input-group-btn">
                   <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
               </span>
             </div>
          </div>
      </div>
  </form>

Demo

Answer 3

你可以这样做

http://codepen.io/anon/pen/HbkGA

浮动和保证金的组合在这种情况下效果很好。

HTML

<form class="form-inline role="form">
  <div class="select-outer">
    <select class="form-control" id="q_radius" name="q[radius]">
      <option value="5">Jobs within 5 miles of</option>
    </select>
  </div>
  <div class="input-group">
    <span class="input-group-btn">
       <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
    </span>
    <div class="input-wrap">
      <input class="form-control" id="q_address" name="q[address]" type="text" value="London Bridge, United Kingdom">
    </div>
  </div>
</form>

CSS

.form-inline .select-outer {
  float:left;
  width: 200px
}
.input-group {
  margin-left: 200px
}

.input-group-btn {
  float:right;
  width: 30px;
  height: 30px
}

.input-wrap {
  margin-right: 30px
}

.input-wrap input {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.fa-search {
  display: inline-block;
}

Answer 4

.col-left {
   width: 200px;
   float: left;
    margin-right: 10px;
  }

  .col-right {
     width: calc(100% - 15em);
      float: left;
  }

#q_address {
  width: 90%;
}

HTML： 将col-left 和col-right 类添加到选择框和搜索框。

<form class="form-inline role="form">
  <select class="form-control col-left" id="q_radius" name="q[radius]">
    <option value="5">Jobs within 5 miles of</option>
    <option value="10" selected="selected">Jobs within 10 miles of</option>
    <option value="20">Jobs within 20 miles of</option>
    <option value="50">Jobs within 50 miles of</option>
    <option value="100">Jobs within 100 miles of</option>
    <option value="99999">All jobs</option>
  </select>
  <div class="input-group col-right">
    <input class="form-control" id="q_address" name="q[address]" type="text" value="London Bridge, United Kingdom">
    <span class="input-group-btn">
       <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
    </span>
  </div>
</form>

DEMO