如何以引导程序形式并排放置两个输入组

Question

我正在尝试实现一种表单布局，其中两个 form-group 元素并排在一行中。我尝试使用以下属性进行样式设置； display:inline、display:flex 等，但是其中 none 有效。

这是我想要并排显示的 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，您可以在此处使用引导程序 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>

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

Answer 2

您需要将两个输入放在一行的不同列中，如下所示：

<div class="row">
  <div class="col">
     <input type="text" class="form-control">
  </div>
  <div class="col">
     <input type="text" class="form-control">
  </div>
</div>

Answer 3

使用 bootstrap4 表格网格，检查这两个例子

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<form class="p-3">
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

<form class="p-3">
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Answer 4

我认为你需要围绕两个表单创建一个区域。

<div style="display: inline-flex">
  <div class="form-group">

  </div>
  <div class="form-group">

  </div>
</div>

如何以引导程序形式并排放置两个输入组

How to place two input-group side by side in boostrap form

twitter-bootstrap

twitter-bootstrap-3

bootstrap-4