Question

我试图使最后一行看起来与其他行完全一样，但是在文本框中附加了图标。我似乎无法正确设置宽度！

（很抱歉，我不知道如何在此页面中正确呈现代码段。您必须全屏查看。）

<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-md-center">
  <div class="col-sm-3">
    <div class="form-group row">
      <label>Name:</label>
      <input type="text" class="form-control" />
    </div>
    <div class="form-group row">
      <label>Date From:</label>
      <input type="text" class="form-control" />
    </div>
    <div class="input-group row">
      <label>Date To:</label>
      <input type="text" class="form-control" />
      <div class="input-group-append">
        <div class="input-group-text" id="btnGroupAddon2">
          <i class="fa fa-search" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

保留“日期至：”标签上方的div的表单组，然后可以插入包含input和image div's的div并添加input-group类将产生所需的结果，请检查我的以下示例！

<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col-sm-3">
      <div class="form-group row">
        <label>Name:</label>
        <input type="text" class="form-control" />
      </div>
      <div class="form-group row">
        <label>Date From:</label>
        <input type="text" class="form-control" />
      </div>
      <div class="form-group row">
        <label>Date To:</label>
        <div class="input-group">
          <input type="text" class="form-control" />
          <div class="input-group-append">
            <div class="input-group-text" id="btnGroupAddon2">
              <i class="fa fa-search" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

如果要将其保留在左侧，则需要花一些时间进行此类课外作业：

<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-md-center">
  <div class="col-sm-3">
    <div class="form-group row">
      <label>Name:</label>
      <input type="text" class="form-control" />
    </div>
    <div class="form-group row">
      <label>Date From:</label>
      <input type="text" class="form-control" />
    </div>
    <div class="input-group row">
      <label class="pt-2">Date To:</label>
      <input type="text" class="form-control ml-2"
      style="border-top-left-radius: .25rem;border-bottom-left-radius: .25rem;"/>
      <div class="input-group-append">
        <div class="input-group-text" id="btnGroupAddon2">
          <i class="fa fa-search" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>
</div>

如何使Bootstrap输入组看起来像表单组

2 个答案: