当前位置 : 主页 > 网页制作 > html >

html – 带按钮的Bootstrap 4列行

来源:互联网 收集:自由互联 发布时间:2021-06-12
我已经开始探索Bootstrap 4和 HTML5 / CSS了.我想创建一个文本区域,侧面有两个按钮(彼此水平居中): 我得到的代码如下: link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/boots
我已经开始探索Bootstrap 4和 HTML5 / CSS了.我想创建一个文本区域,侧面有两个按钮(彼此水平居中):

enter image description here

我得到的代码如下:

<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列的行.第二列包含两行.
这是正确的方法吗?

谢谢

更好的方法是使用按钮列上的d-flex flex-column中的justify-content-justif. col-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>
网友评论