需要帮助创建响应式模板

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>

Answer 2

应该可以的。

<div class="container">
<div class="row">
    <div class="col-sm-12">My text here ------------------</div>
</div>
<div class="row">
    <div class="col-md-3 col-sm-4">Input Label</div>
    <div class="col-md-3 col-sm-4">Input</div>
    <div class="col-md-3 hidden-sm">Input</div>
    <div class="col-md-3">Save button</div>
</div>
<div class="row visible-sm">
    <div class="col-sm-12">
        <div class="col-md-3">Input</div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">Text Area here</div>
</div>
</div>