文本框中的 Bootstrap 字体真棒无法与标签一起正常工作答案

【问题标题】：Bootstrap font awesome in textbox not working properly with label文本框中的 Bootstrap 字体真棒无法与标签一起正常工作
【发布时间】：2018-01-08 17:07:17
【问题描述】：

我有一个引导表单，其中我使用了带有标签的文本框，但它无法正常工作。如果我删除了 span 标签内的字体真棒图标，它工作正常，这是我的 html

            <form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
      <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

我想做这样的事情

https://jsbin.com/quxodidebi/edit?html,js,output

【问题讨论】：

怎么不能正常工作？这两种情况的屏幕截图在我看来非常相似。
标签应该在一行，文本框应该在另一行，带有字体图标
你能在油漆中举个确切的例子吗？我也看不懂评论说明。
好的，我可以帮你做给我一秒钟
@Tatranskymedved 我已经更新了这个问题，我也已经制作了我想要的图像

标签： html css twitter-bootstrap

【解决方案1】：

这段代码怎么样？引导程序 3：

<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
</div>

引导程序 4

<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
  </div>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
</div>

代码 sn-p：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

<div class="form-group">
  <label for="formGroupExampleInput">Example label</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">
        <i class="fa fa-user fa-fw"></i>
      </span>
    </div>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
</div>

JS Fiddle 链接：https://jsfiddle.net/sefnanLm/

【讨论】：

我正在使用引导程序 4
不错的答案，我对其进行了编辑并添加了一个 sn-p 和 JS fiddle 示例。