Bootstrap 4 & Codeigniter 4 - 更大的屏幕视图和更小的屏幕视图以及如何处理表单

Question

我想为大屏幕和小屏幕提供两种不同的菜单。我可以很容易地用下面的代码来完成。我的问题是如何放置表单代码？如果我有 2 种同名形式，这似乎是个问题。如何处理这个？我有个人资料表格、个人资料图像表格、密码表格和时区表格。如果我在同一页面上为大屏幕和小屏幕复制表单，似乎我在自找麻烦。请问这个怎么处理？

<!--
https://code.luasoftware.com/tutorials/bootstrap/bootstrap-hide-element-based-on- 
viewport-size/
-->

<!-- begin larger screen sizes here -->
<div class="d-none d-md-block">[insert menu for large screen size]</div>

<!-- begin small screens -->
<div class="d-block d-md-none">

<!-- Nav tabs -->
<ul class="nav nav-tabs">
    <!-- profile -->
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#profile"><i class="fas fa-id-card"></i></a>
    </li>
    <!-- profile image -->
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#profile-image"><i class="fas fa-images"></i></a>
    </li>
    <!-- password -->
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#password"><i class="fas fa-unlock-alt"></i></a>
    </li>
    <!-- timezone --> 
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#timezone"><i class="fas fa-clock"></i></a>
    </li>
</ul>
      
<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane container active" id="profile">[insert profile settings form here]</div>
    <div class="tab-pane container fade" id="profile-image">[insert profile-image settings form here]</div>
    <div class="tab-pane container fade" id="password">[insert profile password form here]</div>
    <div class="tab-pane container fade" id="timezone">[insert profile timezone form here]</div>
</div>

Answer 1

您为什么要考虑使用 2 个表单？如果是响应能力，您不能使用类似这样的引导程序来处理不同的视口吗？

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <h1>Responsive Form</h1>
      <h2>Send us a message</h2>
      <form action="/sendFrm" method="post" id="contactFrm">
        <div>
          <input class="form-control" type="text" name="contactName" placeholder="Your name" aria-label="your name" required>
        </div>
        <div>
          <input type="email" class="form-control" name="contactEmail" placeholder="Your email" aria-describedby="emailHelp" required>
          <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
        </div>
        <div>
          <textarea class="form-control" name="contactMessage" rows="5" placeholder="Your message" required></textarea>
        </div>
        <div>
          <button type="submit" class="btn inline-block">Send</button>
        </div>
      </form>
    </div>
  </div>
</div>

如果是表单帖子，请不要忘记包含您的 csrf_field()。

如果是其他原因，请告诉我原因。

谢谢