Bootstrap带有按钮的4列行

Question

我已经开始探索Bootstrap 4和HTML5/CSS了.我想创建一个文本区域,侧面有两个按钮(彼此水平居中):

我得到的代码如下:

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


<div class="container mt-2">
  <div class="row">
    <div class="col-10">
      <textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
    </div>
    <div class="col-2">
      <div class="row">
        <button class="btn btn-success btn-sm m-1" type="button">Send</button>
      </div>
      <div class="row">
        <button class="btn btn-info btn-sm m-1" type="button">Clear</button>
      </div>
    </div>
  </div>
</div>

我已经创建了一个包含2列的行.第二列包含两行.这是正确的方法吗？

谢谢

Answer 1

justify-content-around d-flex flex-column在按钮列上执行此操作的更好方法.rowcol-2 div中不需要额外的元素.

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

<div class="container mt-2">
  <div class="row">
    <div class="col-10">
      <textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
    </div>
    <div class="col-2 justify-content-around d-flex flex-column">
      <div>
        <button class="btn btn-success btn-sm" type="button">Send</button>
      </div>
      <div>
        <button class="btn btn-info btn-sm" type="button">Clear</button>
      </div>
    </div>
  </div>