Как я могу добавить 2 кнопки к текстовой области и автоматически выровнять их с помощью начальной загрузки?

Question

Я хочу добавить 2 кнопки справа от текстовой области, одну сверху и другую под ней, используя начальную загрузку, и выровнять их автоматически, возможно ли добиться этого, просто используя класс начальной загрузки?

с помощью https://getbootstrap.com/docs/4.3/components/input-group/ показал пример, который я могу кодировать как:

<div class="input-group-prepend">
    <span class="input-group-text">With textarea</span>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
    <div class="input-group-append" id="button-addon4">
        <button class="btn btn-outline-secondary" type="button">Button</button>
        <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
</div>

, который показал: Но я хочу это как: и выровнять их автоматически (и, возможно, отрегулировать их размер по размеруtextarea auto?) Так есть ли способ сделать это, просто используя класс начальной загрузки?

Answer 1

Используйте d-flex flex-column для #button-addon4 div, а также применяйте flex: 1 0 auto; для кнопок, чтобы увеличить высоту кнопки при увеличении высоты текстовой области.

.input-group-text,
.btn-outline-secondary {
  flex: 1 0 auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="input-group-prepend">
    <span class="input-group-text">With textarea</span>
  </div>
  <div class="d-flex">
    <textarea class="form-control" aria-label="With textarea"></textarea>
    <div class="d-flex flex-column" id="button-addon4">
      <button class="btn btn-outline-secondary" type="button">Button</button>
      <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>


  <div class="input-group mt-4">
    <textarea class="form-control" aria-label="With textarea"></textarea>
    <div class="input-group-append d-flex flex-column">
      <span class="input-group-text">Button 1</span>
      <span class="input-group-text">Button 2</span>
    </div>
  </div>
</div>

Answer 2

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>

<div class="d-flex">
  <textarea rows="4" cols="50" resize="false"></textarea>
  <div class="d-flex flex-column">
      <button type="button" class="btn btn-primary mb-1">Primary</button>
      <button type="button" class="btn btn-primary">Primary</button>
  </div>
</div>

Answer 3

Вы можете использовать сетку Bootstrap, чтобы взять текстовую область и кнопки рядом.И для кнопок используйте ту же ширину, что и для родительского элемента div и кнопок, и используйте свойство display с параметром inline-block.

Как показано ниже

HTML:

  <div class="input-group-prepend">
    <span class="input-group-text">With textarea</span>
  </div>
  <div class="row">
    <div class="col">
      <textarea class="form-control" aria-label="With textarea"></textarea>
    </div>
    <div class="col">
      <div class="input-group-append button-group" id="button-addon4">
        <button class="btn btn-outline-secondary" type="button">Button</button> 
        <button class="btn btn-outline-secondary" type="button">Button</button>
      </div>
    </div>
  </div>
</div>

CSS:

.button-group {
    width: 70px;
    display: inline-block !important;
    margin-left: -28px !important;
}

.btn {
  width: 70px;
}

и вот codepen для просмотра вышеприведенного вывода кода