twitter-bootstrap - 如何以 Bootstrap 形式并排放置两个输入组

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，您可以使用 bootstrap grid system在这里实现所需的布局:

<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"> )。然后将每一列包含在一个公共(public)“行”中(即 <div class="row"> )，默认情况下，这将导致每一列共享行宽的一半。