用按钮引导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的更好方法。 col-2 div中不需要其他row元素。

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

Answer 2

我认为这种方法更好。 （：

• 在col列中使用textarea，以便占用所有可用空间。
• 对按钮列使用col-auto，以便占用所需的空间。然后使用d-flex flex-column更改其方向。

<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">
      <textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
    </div>
    <div class="col-auto d-flex flex-column">
      <button class="btn btn-success btn-sm m-1" type="button">Send</button>
      <button class="btn btn-info btn-sm m-1" type="button">Clear</button>
    </div>
  </div>
</div>

Answer 3

您应该将每个按钮放在带有“ col -...”类的div中。

Bootstrap documentation about nesting elements in a row

示例中的Codepen展示了使用'col -...'类时的区别。

Codepen

<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-info btn-sm m-1" type="button">Clear</button>
        </div>
        <div class="row">
          <div class="col-12">
            <button class="btn btn-success btn-sm m-1" type="button">Send in col</button>
          </div>
        </div>          
        <div class="row">
          <div class="offset-6 col-6">
            <button class="btn btn-success btn-sm m-1" type="button">Send centered using col</button>
          </div>
        </div>
  </div>

Answer 4

也使文本区域不可调整是好的。 试试这个

textarea.form-control{
  resize: none;
}

<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">
      <div class="d-flex flex-column">
         <button class="btn btn-success btn-sm m-1" type="button">Send</button>
          <button class="btn btn-info btn-sm m-1" type="button">Clear</button>
       </div>
      </div>
    </div>
  </div>
</div>