我已经开始探索Bootstrap 4和 HTML5 / CSS了.我想创建一个文本区域,侧面有两个按钮(彼此水平居中): 我得到的代码如下: link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/boots
我得到的代码如下:
<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>