如何以 boostrap 形式并排放置两个输入组

Question

我正在尝试实现一个表单布局，其中两个form-group元素并排在一行上。我尝试过使用以下属性进行样式设计；display:inline，display:flex等等，但这些都不起作用。

form-group这是我想要并排放置的元素的片段：

<div class="form-group">
    <label for="entercomments" class="col-sm-2 control-label">From Date</label>
    <div class="col-sm-10">
        <div class="input-group fromdate inline"  data-date-format="yyyy-mm-dd" style="width:250px">
            <input type="text" class="form-control fromdate"  placeholder="dd-mmm-yyyy" id="FromDate" runat="server" data-date-container="#formDiv" />
            <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
        </div>
    </div>
</div>
<div class="form-group">
    <label for="entercomments" class="col-sm-2 control-label">To Date</label>
    <div class="col-sm-10">
        <div class="input-group todate inline" data-date-format="yyyy-mm-dd" style="width:250px">
            <input type="text" class="form-control todate" placeholder="dd-mmm-yyyy" id="ToDate" runat="server" data-date-container="#formDiv"  />
            <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
        </div>
    </div>
</div>

Answer 1

看到您正在使用 Bootstrap，您可以在此处使用 bootstraps网格系统来实现所需的布局：

<div class="row">
  <div class="col">
    <div class="form-group">
      <!-- Existing form group markup -->
    </div>
  </div>
  <div class="col">
    <div class="form-group">
      <!-- Existing form group markup -->
    </div>
  </div>
</div>

这里的想法是将要在同一行上对齐的“表单组”元素包含在“列”（即<div class="col">）内。然后，每一列都包含在一个公共“行”（即<div class="row">）中，默认情况下，这将导致每列共享该行宽度的一半。