Question

我在Bootstrap的input-group的帮助下创建了一个文本框和一个提交按钮：

<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
            Search
        </button>
    </span>
</div>
</div>

我想在文本框中添加一个可点击的地理位置图标，我尝试做很多事情，例如添加input-group-addon的另一个范围，但是创建了一个按钮类型的东西。我希望图标位于文本框内并使其可单击。任何人都可以建议一种方法吗？

Answer 1

添加'2'将其设为anchor类，然后将其glyphicon设为如下：

<强> DEMO

position:absolute

<强> CSS

<div class="input-group input-group-lg col-lg-6 col-centered">
    <a href="#" onclick="alert('clicked');" class="glyphicon glyphicon-map-marker"></a>
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
            Search
        </button>
    </span>
</div>

Answer 2

Anirudh ，你好，你可以尝试这样的没有所有额外的 css 。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
    <a href="#" onclick="alert('clicked');" ></a>
    <div class="input-group-addon glyphicon glyphicon-map-marker btn"></div>
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
            Search
        </button>
    </span>
</div>
</div>

Answer 3

<div class="row">
    <div class="col-sm-2 col-md-2 col-lg-2"></div>

    <form ng-submit="search(searchterm)">
      <div class="form-group">
        <div class="input-group input-group-lg col-sm-8 col-md-8 col-lg-8 col-centered">
          <input type="text" class="form-control" ng-model="searchterm">
          <span class="input-group-btn">
            <button type="submit" class="btn btn-default">
              <span class="glyphicon glyphicon-search"></span>
            </button>
          </span>
        </div>
      </div>
    </form>

    <div class="col-sm-2 col-md-2 col-lg-2"></div>
  </div> <!-- end row -->

我的客户想要一个搜索框，右侧有一个可点击的搜索字形，搜索框位于窗口中心，搜索框大于正常（input-group-lg），带有响应式视图。在看到AngularJR的答案之前，我是一个可怜的可怜人。： - ）

Answer 4

.input-group abbr{
    font-size: 23px;

    position: absolute;
    right: 16%;
    top: 6px;
    z-index: 500;
}

<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
    <input type="text" class="form-control">enter code here
    <abbr><a href="#"><i class="fa fa-map-marker"></i></a></abbr>

    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
            Search
        </button>
    </span>
</div>
</div>

将带有输入组类的可单击图标添加到文本框

4 个答案: