Warm tip: This article is reproduced from stackoverflow.com, please click
css html user-interface twitter-bootstrap

How can I append 2 button to textarea and align them automatically using bootstrap?

发布于 2020-03-27 10:16:37

I want to add 2 button to the right of textarea,one on top and another under it using bootstrap and align them automatically,is it possible to achive with just using orignal bootstrap class?

with https://getbootstrap.com/docs/4.3/components/input-group/ showed example I can code some like :

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

which showed: ss But I want it like: ss and align them automatically (and maybe adjust their size by the size of textarea auto?) so is there a way could done it by just using orignal bootstrap class?

Questioner
Jason117
Viewed
137
分享
Nandita Sharma 2019-07-03 19:26

Use d-flex flex-column on #button-addon4 div and also apply flex: 1 0 auto; on the buttons to expand button's height when the textarea's height is increased.

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

Related issues

1
CSS: background image on background color
2
Create loading messages that will change based on loading time of plot in a shiny app
3
Hiding the background in an iframe that belongs to a different domain with css
4
How to define a font size that scales with browser zoom level?
5
rounded-borders
6
p tag within a div affecting the adjacent div's position
7
Dropdown Nav Menu Appears on Right and Stacked Horizontally
8
Why is my getting cut off when resizing window?
9
How to get bootstrap to take whole screen
10
Center n amount of v-col in vuetify grid with added spacing