区别：input-group-prepend＆amp;附加？ （BS4）

Question

任何人都可以解释以下两者之间的区别：输入组 - 前置＆amp;的输入基团的附加？ ，我在文档中找不到任何解释。

Answer 1

如果您阅读Bootstrap 4 docs，则表示它曾经在输入的任意一侧放置一个插件或按钮，同时在输入之前添加它，然后追加。

因此，input-group-prepend应如下所示：

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">preprend</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

对于input-group-append：

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">append</span>
  </div>
</div>

如果从Bootstrap 4中查看_input-group.scss中的css规则，您可以看到它们共享大部分规则，重要的部分是在输入之前或之后放置div。

我使用Bootstrap 4示例创建了codepen。

＆＃13;

＆＃13;

.show-grid>[class^=col-] {
	padding-top: .75rem;
	padding-bottom: .75rem;
	background-color: rgba(86,61,124,.15);
	border: 1px solid rgba(86,61,124,.2);
}

button {
  height: 100px;
}

＆＃13;

<div class="container">
  
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">preprend</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
  
  <div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">append</span>
  </div>
</div>
  
</div>

＆＃13;

＆＃13;

＆＃13;