html - Bootstrap 对输入组有危险，而不是像表单组那样在单独的行上

Question

使用 input-group 在使用 has-danger 样式和添加帮助文本和反馈字段时会出现一些问题。在 form-group 上使用它们将它们分隔在每一行，但在 input-group 上使用它们会将所有内容放在同一行上。

我制作了一个 fiddle ，显示了使用 input-group(顶部)、使用 form-group(中间)和尝试组合 form 时的问题-group 和 input-group(底部)。

Here is a link to fiddle.

不适用于输入组。反馈和帮助文本应该在不同的行上

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="form-group input-group has-danger">
			<label class="form-control-label" for="inputDanger1">Input with danger</label>
			<span class="input-group-addon"><i class="fa fa-at"></i></span>
			<input type="text" class="form-control form-control-danger" placeholder="Your email address" id="inputDanger1">
			<div class="form-control-feedback">Sorry, that username's taken.</div>
			<small class="form-text text-muted">Example help text that remains unchanged.</small>
    </div>

为表单组工作。反馈和帮助文本应该在不同的行上

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
 
<div class="form-group has-danger">
	<label class="form-control-label" for="inputDanger2">Input with danger</label>
	<input type="text" class="form-control form-control-danger" placeholder="Your email address" id="inputDanger2">
	<div class="form-control-feedback">Sorry, that username's taken.</div>
	<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

将输入组包装在表单组中时，Has-danger 不起作用

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div clas="form-group has-danger">
		<label class="form-control-label" for="inputDanger3">Input with danger</label>
		<div class="input-group">
		<span class="input-group-addon"><i class="fa fa-at"></i></span>
		<input type="text" class="form-control form-control-danger" placeholder="Your email address" id="inputDanger3">
		</div>
		<div class="form-control-feedback">Sorry, that username's taken.</div>
		<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
  

Answer 1

我从这里删除了 has-danger <div class="form-group has-danger">而是把它放在这里。 <div class="input-group">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group ">
                <label class="form-control-label" for="inputDanger3">Input with danger</label>
                <div class="input-group has-danger"> 
                  <span class="input-group-addon"><i class="fa fa-at"></i></span>
                  <input type="text" class="form-control form-control-danger" placeholder="Your email address" id="inputDanger3">
                </div>
                <div class="form-control-feedback">Sorry, that username's taken.</div>
                <small class="form-text text-muted">Example help text that remains unchanged.</small>
              </div>

在此处添加 has-danger <div class="form-group has-danger">将更改文本以继承 has-danger。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-danger">
                <label class="form-control-label" for="inputDanger3">Input with danger</label>
                <div class="input-group has-danger"> 
                  <span class="input-group-addon"><i class="fa fa-at"></i></span>
                  <input type="text" class="form-control form-control-danger" placeholder="Your email address" id="inputDanger3">
                </div>
                <div class="form-control-feedback">Sorry, that username's taken.</div>
                <small class="form-text text-muted">Example help text that remains unchanged.</small>
              </div>