html - 带有图像的 Bootstrap 输入组

Question

我正在使用 bootstrap 3 创建具有普通文本的输入组，如下图所示

如何获得包含图像和超过 2 个跨度文本的输入组。

我正在为普通输入组使用以下代码

<div class="input-group input-group-lg">
  <input type="text" style="background-color: black; color: white" class="form-control" aria-label="You Send">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  <!-- /btn-group -->
</div>
<!-- /input-group -->

编辑 1:

Answer 1

有许多 CSS 技巧可以在输入字段中嵌入图像。就我个人而言，如果我们要使用 Bootstrap，那就让我们真正使用 Bootstrap。也许还有像 FontAwesome 这样的图标包。

.search-icon:before {
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f002";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text border-right-0 bg-white">
    <!-- Stack overflow doesn't allow this, but if it did, I would not need
         any custom  css, just the following html only this: 
    <i class="fas fa-search"></i>
    Instead I have to use this over here. -->
      <span class="search-icon"></span>
    </span>
  </div>
  <input type="text" class="form-control border-left-0" placeholder="Search">
</div>

如果你想放自己的自定义图片，你可以像这样编辑css:

.search-icon:before {
  content: url(path/to/your-image.jpg);
}

一旦您阐明了双跨文本的含义，我将更新我的答案。