Блог

Я довольно новичок в HTML и bootstrap

Я создал центрированную форму, но я хочу добавить маленькую кнопку (красный крест) справа от поля ввода «название главы», и я не знаю, как мне это сделать

Текущий html:

 <form>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Chapter title" required>
  </div>

  <div class="form-group">
    <textarea class="form-control" rows="15"></textarea>
  </div>

  <div class="form-group" align="center">
    <button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
  </div>
</form>
  

что мне нужно добавить или изменить

Используйте float-right вместе с классом утилиты с отрицательным запасом, например mr-n4 …

 <div class="container">
    <button class="btn btn-text float-right mr-n4 close">
        <span aria-hidden="true">amp;times;</span>
    </button>
    <form>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Chapter title" required>
        </div>
        <div class="form-group">
            <textarea class="form-control" rows="15"></textarea>
        </div>
        <div class="form-group" align="center">
            <button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
        </div>
    </form>
</div>
  

https://codeply.com/p/CliBMjnlsN

ответ @Zim работает, но мне просто не нравится работать с поплавками, поэтому я придумал другое решение с абсолютным позиционированием.

 <form>
    <div class="form-group form-group-with-extra-button">
        <input type="text" class="form-control" placeholder="Chapter title" required>
        <button type="button" class="btn btn-extra">
            <span aria-hidden="true">amp;times;</span>
        </button>
    </div>

    <div class="form-group">
        <textarea class="form-control" rows="15"></textarea>
    </div>

    <div class="form-group text-center">
        <button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
    </div>
</form>
  

 .form-group-with-extra-button {
    position: relative;
}

.form-group-with-extra-button .btn-extra {
    position: absolute;
    left: 100%;
    top: 0;
    color: var(--danger);
}
  

демо: https://jsfiddle.net/davidliang2008/1dpz0w52/24/

Это не совсем то, чего я хотел, но я думаю, это то, чего я собираюсь придерживаться

 <form>
  <div class="form-group input-group">
    <input type="text" class="form-control" placeholder="Chapter title" required>
    <div class="input-group-append">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false"></button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Delete chapter</a>
        <a class="dropdown-item" href="#">Add chapter before</a>
        <a class="dropdown-item" href="#">Add chapter after</a>
      </div>
    </div>
  </div>

  <div class="form-group">
    <textarea class="form-control" rows="10"></textarea>
  </div>

  <div class="form-group" align="center">
    <button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
  </div>
</form>