SNa*_*aRe 1 html css twitter-bootstrap bootstrap-4
我正在尝试在输入组下添加一个小文本。但它不起作用，因为它与 form-group 一起使用。
所以在这个例子中，我希望帮助文本位于输入下方，而不是位于输入右侧这就是我对输入组的意思https://getbootstrap.com/docs/4.0/components/input-group/
这是 jsfiddle 的播放链接https://jsfiddle.net/c59hnx8v/
顺便说一句，这只是为了演示。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<form>
<div class="row">
<div class="col">
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@</span>
</div>
<small>Help text</small>
</div>
</div>
<div class="col">
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@</span>
</div>
<small>Help text</small>
</div>
</div>
<div class="col">
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@</span>
</div>
<small>Help text</small>
</div>
</div>
<div class="col">
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@</span>
</div>
<small>Help text</small>
</div>
</div>
<div class="col">
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@</span>
</div>
<small>Help text</small>
</div>
</div>
</div>
</form>
</div>
</body>
</html>这与此处的问题类似，并且问题存在是因为 Bootstrap 4 输入组是display:flex。
最简单的“修复”是确保help-text宽度：100%，并且w-100可以使用该类来实现此目的。这不需要额外的 CSS。
<div class="col">
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@</span>
</div>
<small class="w-100">Help text</small>
</div>
</div>
https://www.codeply.com/go/MvXabRrm2c