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

在使用样式has-danger并添加帮助文本和反馈字段时，使用输入组会带来一些问题。在表单组上使用它们会将它们分隔在每一行上，但在输入组上使用它们会将所有内容放在同一行上。

我做了一个小提琴，显示了使用输入组（顶部），使用表单组（中间）并尝试组合表单组和输入组（底部）时的问题。

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>
  

最佳答案

我从这里<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>

在这里<div class="form-group has-danger">中添加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>

关于html - Bootstrap具有输入组的危险，而不是像form-group那样在单独的行上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44501205/