在表单内联中创建表单组

Question

您好我正在尝试使用class =“form-group”将div与其标签放在最上面。因此，标签与字段内联，并且它们堆叠在彼此之上，如下所示：

我想这样做：

这是我的代码：

<div class="container">
  <br />
    <div class="row">
        <div class='col-sm-3'>
            <form class="form-inline">
              <div class="form-group">
                <label for="date">DATE</label>
                <div class='col-sm-8 input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </div>
              </div>
              <div class="form-group">
                <label for="date">DATE 2</label>
                <div class='col-sm-8 input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </div>
              </div>
            </form>
        </div>
    </div>
</div>

Answer 1

尝试以下方法：

CSS

.form-group{display: inline-block; }

这基本上意味着每个具有类form-group的div将以从左到右堆叠的方式显示。您也可以尝试float: left;。

Answer 2

请设置“form-inline”。这是Bootstrap用于内联的一个类。我相信你正在使用Bootstrap。

详情请见https://getbootstrap.com/docs/3.3/css/#forms

在小提琴上创作：https://jsfiddle.net/552yzg22/#&togetherjs=O18LSbynLF

Answer 3

你这样做是错误的，这是正确的做法

https://codepen.io/the_leg3nd/pen/rGQKvB?editors=1000

您可以在表单组内添加多行，在这种情况下，您无需在.col-*或form-group内提供任何input-group类。