Разница между: input-group-prepend & append?(BS4)

Question

Может ли кто-нибудь объяснить разницу между: input-group-prepend & input-group-append ?Я не могу найти никакого объяснения в документации.

Answer 1

Если вы читаете документацию Bootstrap 4 , в нем говорится, что он используется для размещения одного дополнения или кнопки по обе стороны от входа, в то же время добавляя его перед входом и добавляя после.

Итак, 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>

Если вы проверяете правила css в _input-group.scss из Bootstrap 4, вы можете видеть, что они разделяют большинство правил, важная часть - поместить div перед вводом или после.

Я создал codepen , используя Bootstrap 4примеры.

.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;
}

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