html - 需要帮助创建响应式模板

Question

我正在尝试制作一个响应式网格，但我非常不成功。

我是 bootstrap 的新手，我在前端方面不是很好。

我尝试了一些代码，但这个是最接近我需要的。

    <div><p>MY TEXT HERE -------------------------</p></div>
    <div>

                <div id="containerTest" class="container-fluid" style="margin-left: 0px;">
      <div class="row">
        <div class="col-sm-3" style="background-color:red;" >AAAA</div>
        <div class="col-sm-6" style="background-color:lavenderblush;">BBBBB</div>
        <div class="col-sm-3" style="background-color:lavender;">
            <button class="button button2">OK</button></div>
      </div>
    </div>

Answer 1

使用此 Bootstrap 4 代码，布局看起来就像您的绘图。

<div class="container">
  <div class="row">
    <div class="col-12">
      <p>My text here</p>
    </div>
  </div>
  <div class="row">
    <div class="col-3 col-md-2 pt-2 pr-0">
      <label>Input label</label>
    </div>
    <div class="col-6 col-md-2 pr-0">
      <input type="text" class="form-control w-100">
    </div>
    <div class="col-3 d-md-none">
      <button type="button" class="btn btn-success">Save</button>
    </div>
    <div class="col-12 col-md-3">
      <input type="text" class="form-control w-100">
    </div>
    <div class="col-12 col-md-3 d-none d-md-flex pl-0">
      <button type="button" class="btn btn-success">Save</button>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <p>Other elements here</p>
    </div>
  </div>
</div>