Question

使用输入组时，在使用样式 has-danger 并添加帮助文本和反馈字段时会出现一些问题。在 form-group 上使用这些将它们分开，但在 input-group 上使用这些将它们放在同一行上。

使用 input-group （顶部），使用 form-group （中）并尝试合并表单时，我做了一个小提示-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 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

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

对于表单组

1 个答案: