在表单内联内制作表单组

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

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

查看更多详情：https://getbootstrap.com/docs/3.3/css/#forms

创建了一个小提琴：https://jsfiddle.net/552yzg22/#&togetherjs=O18LSbynLF

Answer 2

尝试以下方法：

CSS

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

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

Answer 3

你做错了，这是正确的做法

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

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