Question

我正在使用bootstrap的网格系统。

我的HTML看起来如下（玉语法）

    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％宽度（例如col-lg-4，这些col-lg类实际上是“表格单元格”）：

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

然而，我需要在上面的SELECT之前（或者，之后）显示一些HTML。我需要HTML与SELECT在同一行。如果我现在只是在SELECT之后输入一些内容，它将转到下一行，因为该值的宽度= 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>

bootstrap grid - form-control占用父div的全宽，如何插入旁边的东西？

1 个答案: