需要帮助来创建响应模板

2024-05-21 • 问答

我正在尝试建立一个响应式网格，但是我没有成功。

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

使用此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>

应该这样做。

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

需要帮助来创建响应模板

kx287973135 回答：需要帮助来创建响应模板

大家都在问