Bootstrap html使文本区域跨越表单中的多行

Question

如何使用 bootstrap col 和 rows 使我的文本区域跨越表单中的多行。

这是我的意思的屏幕截图。

我希望“注释”文本区域跨越两列，到达我以黄色突出显示的区域。

这是我到目前为止的代码

<form>

  <div class="form-row">
    <div class="form-group col-md-4">
      <label for="input-1">input 1</label>
      <input id="input-1" class="form-control full-width" type="text" name="input-1" placeholder="input-1">
    </div>

    <div class="form-group col-md-4">
      <label for="input-2">input 2</label>
      <input id="input-2" class="form-control full-width" type="text" name="input-2" placeholder="input-2">
    </div>

  </div>

  <div class="form-row">
    <div class="form-group col-md-4">
      <label for="input-3">input 3</label>
      <input id="input-3" class="form-control full-width" type="text" name="input-3" placeholder="input-3">
    </div>

    <div class="form-group col-md-4">
      <label for="input-4">input 4</label>
      <input id="input-4" class="form-control full-width" type="text" name="input-4" placeholder="input-4">
    </div>

  </div>

  <div class="form-group">
    <label for="text-content">Notes</label>
    <textarea class="form-control" id="text-content" rows="3"></textarea>
  </div>

  <div class="form-row">
    <div class="form-group col-md-4 offset-md-8">
      <div class="float-right">
        <button type="button" class="btn btn-primary" id="search"> 
           Search</button>
      </div>
    </div>
  </div>
</form>

Answer 1

基本上，您需要做的就是在元素周围添加另一个容器。

试试这个片段：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<form>
  <div class="form-row">

    <div class="col-md-8">


      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="input-1">input 1</label>
          <input id="input-1" class="form-control full-width" type="text" name="input-1" placeholder="input-1">
        </div>

        <div class="form-group col-md-6">
          <label for="input-2">input 2</label>
          <input id="input-2" class="form-control full-width" type="text" name="input-2" placeholder="input-2">
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="input-3">input 3</label>
          <input id="input-3" class="form-control full-width" type="text" name="input-3" placeholder="input-3">
        </div>

        <div class="form-group col-md-6">
          <label for="input-4">input 4</label>
          <input id="input-4" class="form-control full-width" type="text" name="input-4" placeholder="input-4">
        </div>

      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label for="text-content">Notes</label>
        <textarea class="form-control" id="text-content" rows="3"></textarea>
      </div>

      <div class="form-row">
        <div class="form-group col-md-4 offset-md-8">
          <div class="float-right">
            <button type="button" class="btn btn-primary" id="search"> 
           Search</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>