如何让小屏幕及移动端中表单的Send按钮置于最后位置？

Hey there! Let's get that Send button sitting at the very bottom when viewed on mobile or small screens. Here's a straightforward approach that works with your existing W3.css and Bootstrap setup:

Step 1: Adjust the HTML Structure #

First, we'll move the Send button out of the left column and place it at the end of your row. This ensures it naturally stacks below all other input fields on small screens. We'll also tweak the input width to be responsive instead of fixed for better mobile experience.

Here's the modified code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Form Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
input { 
  width: 100%; /* Makes inputs fit their container on all screen sizes */
  margin-bottom: 10px; /* Adds spacing between inputs for better readability */
}
.send-btn {
  width: 100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Push and Pull</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-5" style="background-color:lavender;">
<input type="text" placeholder="1">
<input type="email" placeholder="2">
<input type="text" placeholder="3">
</div>
<div class="col-sm-2" style="background-color:lavender;"></div>
<div class="col-sm-5" style="background-color:lavenderblush;">
<input type="text" placeholder="4">
<input type="email" placeholder="5">
<input type="text" placeholder="6">
</div>
<!-- Moved Send button here to sit below all columns on mobile -->
<div class="col-sm-5 col-sm-offset-2" style="margin-top: 10px;">
<input class="send-btn w3-btn w3-blue" type="submit" value="send">
</div>
</div>
</div>
</body>
</html>

Step 2: Key Changes Explained #

• Moved the Send Button: By placing the button in its own column at the end of the row, Bootstrap's responsive grid will stack it below the left and right columns when the screen size drops below the sm breakpoint (768px).
• Responsive Input Width: Changed width: 300px to width: 100% so inputs adapt to their container, avoiding horizontal scrolling on small screens.
• Aligned Button on Desktop: Used col-sm-offset-2 to shift the button column to match the position of the right input column on desktop screens, keeping the layout clean.
• W3.css Button Styling: Added w3-btn and w3-blue to give the button W3.css's native styling, making it consistent with the framework you're using.

Alternative: Keep Button on Desktop, Move to Bottom on Mobile #

If you want the button to stay inside the left column on desktop but jump to the bottom on mobile, you can use W3.css's visibility classes to show/hide duplicate buttons:

<!-- Inside the left column (desktop only) -->
<input class="w3-hide-small w3-btn w3-blue" type="submit" value="send">

<!-- At the end of the row (mobile only) -->
<div class="col-sm-12 w3-show-small" style="margin-top:10px;">
<input class="send-btn w3-btn w3-blue" type="submit" value="send">
</div>

This way, only one button is visible at a time—desktop sees the one in the left column, mobile sees the one at the bottom.

内容的提问来源于stack exchange，提问作者Nabil