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

时间:2018-08-09 18:10:19

标签: html css twitter-bootstrap bootstrap-4

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

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

<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>

2 个答案:

答案 0 :(得分:1)

保留“日期至:”标签上方的div的表单组,然后可以插入包含inputimage 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>

答案 1 :(得分:1)

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

<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>