Bootstrap新手求助：修改搜索框默认宽度及调整上下间距

Hey there! Let's sort out your Bootstrap search box problems without relying on messy   workarounds. I'll break this down into two easy, clean fixes: adjusting the search box width and adding responsive spacing above/below the form.

1. Adjusting the Search Box Width #

Right now your CSS sets .form-inline .form-control { width: auto; }, which makes the search box only as wide as its placeholder text. You have two solid options to fix this:

Option 1: Use Bootstrap's Built-in Width Classes #

Bootstrap has utility width classes that work out of the box—no custom CSS needed. Just add a class like w-75 (75% of the container width) or w-100 (full container width) to your form-control element. For example:

<input class="form-control mr-sm-2 w-75" type="search" placeholder="I'M LOOKING FOR..." aria-label="Search">

You can also use responsive variants like w-md-75 if you want the width to shrink on mobile devices.

Option 2: Custom CSS (For Exact Pixel Control) #

If you need a specific pixel width, override the width property in your custom CSS (make sure this code comes after the default Bootstrap CSS file so it takes priority):

.form-inline .form-control {
  width: 500px; /* Adjust this value to your desired width */
  display: inline-block;
  vertical-align: middle;
}
/* Keep the rest of your .form-inline styles as-is */

2. Fixing Top/Bottom Spacing #

Forget  —Bootstrap's margin utility classes are made for this exact scenario, and they're fully responsive. Here's how to use them:

Add classes like mt-3 (margin-top: 1rem) and mb-3 (margin-bottom: 1rem) to your <form> element. The number (0-5) controls spacing size (higher = more space). For example:

<form class="form-inline mt-3 mb-3">
  <input class="form-control mr-sm-2 w-75" type="search" placeholder="I'M LOOKING FOR..." aria-label="Search">
  <button class="btn btn-pnpsample my-2 my-sm-0" type="submit">Search</button>
</form>

• mt-3: Creates space between the form and the image above it.
• mb-3: Adds space between the form and the navigation bar below.

If you prefer padding (space inside the form container) instead of margin, use pt-3 pb-3 instead.

Full Modified Code Example #

Here's how your HTML would look with both fixes applied:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Search -->
<form class="form-inline mt-3 mb-3">
  <input class="form-control mr-sm-2 w-75" type="search" placeholder="I'M LOOKING FOR..." aria-label="Search">
  <button class="btn btn-pnpsample my-2 my-sm-0" type="submit">Search</button>
</form>
<!-- End search -->

This approach keeps your code clean, responsive, and aligned with Bootstrap's best practices—no more awkward spacing hacks!

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