html - 在内联表单中制作表单组

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

请设置“表格内联”。这是 Bootstrap 的内联类。我相信您正在使用 Bootstrap。

查看更多详细信息:https://getbootstrap.com/docs/3.3/css/#forms

创建了一个 fiddle :https://jsfiddle.net/552yzg22/#&togetherjs=O18LSbynLF