bootstrap grid - form-control需要父div的全部宽度，如何在它旁边插入内容？

Question

我使用的是bootstrap的网格系统。

我的HTML如下所示(jade语法)

    form.form-horizontal(role='form', name='containerForm', id='containerForm', novalidate)
       fieldset 
          .form-group
              label.col-lg-2.control-label(for='ContType')
              .col-lg-4
                select.form-control(ng-model="data.ContainerType", id='ContType', name='ContType', ng-options='translate(s.name) for s in containerTypeList')
          .form-group

          (and so on)

'form-control‘CSS类占用了父DIV的100%宽度(例如cells 4，这些cells类实际上是“表格单元格”)：

 .form-control {
    display: block;
    width: 100%;
  }

然而，我需要在上面的选择之前(或者，在之后)显示一些HTML。我需要那个HTML和SELECT在同一行。如果我只是在SELECT now之后输入一些东西，它会转到下一行，这是由于该SELECT的width=100%。

我如何才能在保持引导类不变的情况下实现我的目标呢？

Answer 1

您可以将这两个项目放在一行中，然后将每个项目放在它自己的列中。例如：

<div class="row col-sm-12">
<div class="col-sm-6">
    <input type="text" class="form-control">
</div>
<div class="col-sm-6">
    <button class="btn btn-primary">Demo</button>
</div> 

或者，您可以使用输入组，例如：

<div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button class="btn btn-default">Demo</button>
    </span>
</div>