Question

我有一个包含3个字段的表单，其中两个用于输入日期。我被要求在场地的最后添加一个图标。

这是结果：

如果您看到图标的字段向左和向右扩展超出其他字段，那么它看起来非常难看。

这是代码：

<div class="form-horizontal">

    <div class="form-group">
        <label class="col-md-4 control-label">Begin</label>
        <div class="col-md-8">
            <input type="text" class="form-control" placeholder="mm/dd/yyyy" />

        </div>
    </div>

    <div class="form-group">
        <label class="col-md-4 control-label">End</label>
        <div class="input-group col-md-8">
            <input type="text" class="form-control" placeholder="mm/dd/yyyy" />
            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-4 control-label">Text Search</label>
        <div class="col-md-5">
            <input type="text" class="form-control">

        </div>
        <div class="col-md-3">

            <button id="btnSavedMessages" class="btn btn-primary">Search</button>
        </div>
    </div>

</div>

关于如何做到这一点的任何线索？

Answer 1

有些CSS搞砸了你。您与input-group col-md-8的行显然出现故障。我举了一个例子：

https://plnkr.co/edit/gxpaP4wR8cZzb3E4CvtR

检查您是否有一些覆盖bootstra的自定义CSS＆＃39;。

Answer 2

以下是您的固定代码，请将其复制并粘贴

<div class="form-horizontal">

<div class="form-group">
    <label class="col-md-4 control-label">Begin</label>
    <div class="col-md-8">
        <input type="text" class="form-control" placeholder="mm/dd/yyyy">

    </div>
</div>

<div class="form-group">
    <label class="col-md-4 control-label">End</label>
    <div class="col-md-8">
      <div class="input-group ">
        <input type="text" class="form-control" placeholder="mm/dd/yyyy">
        <span class="input-group-addon"><i class="fa fa-lock"></i></span>
    </div></div>
</div><div class="form-group">
    <label class="col-md-4 control-label">Text Search</label>
    <div class="col-md-5">
        <input type="text" class="form-control">
    </div>
    <div class="col-md-3">
        <button id="btnSavedMessages" class="btn btn-primary">Search</button></div></div></div>

我测试过它工作正常。干杯！

Answer 3

使用我的代码，这工作正常。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-horizontal">

  <div class="form-group">
    <label class="col-md-4 control-label">Begin</label>
    <div class="col-md-8">
      <input type="text" class="form-control" placeholder="mm/dd/yyyy" />

    </div>
  </div>

  <div class="form-group">
    <label class="col-md-4 control-label">End</label>
    <div class="col-md-8">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="mm/dd/yyyy" />
        <span class="input-group-addon"><i class="fa fa-lock"></i></span>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-4 control-label">Text Search</label>
    <div class="col-md-5">
      <input type="text" class="form-control">

    </div>
    <div class="col-md-3">

      <button id="btnSavedMessages" class="btn btn-primary">Search</button>
    </div>
  </div>

</div>

带有图标的CSS Bootstrap 3.0字段

3 个答案: