如何缩小Bootstrap Datepicker的文本输入框宽度？

Got it, let's tackle that too-wide datepicker issue you're facing! Here are a few simple, Bootstrap-friendly ways to shrink its width while keeping things responsive:

1. Use Bootstrap's Built-in Grid Classes #

Bootstrap's grid system is perfect for controlling element widths without custom CSS. Just add a column class (like col-md-6 or col-sm-8) to your datepicker container. This will make it take up a portion of the screen width instead of the full width:

<!---DatePicker ----> 
<div class="d-flex justify-content-start"> 
  <div class="col-md-6 col-sm-8 input-daterange input-group" id="datepicker"> 
    <input type="text" class="input-sm form-control" name="from" placeholder="startdate"/> 
    <span class="input-group-addon">To</span> 
    <input type="text" class= "input-sm form-control" placeholder="enddate"/> 
  </div> 
</div><br>

• col-md-6 means the datepicker will take half the screen width on medium and larger screens.
• col-sm-8 adjusts it to take 8/12 of the width on small screens, keeping it from feeling cramped.

2. Add Custom CSS for Precise Control #

If you need more exact width control, create a custom class and apply it to the datepicker container. This lets you set a maximum width while keeping it responsive on smaller screens:

First, add the custom class to your HTML:

<!---DatePicker ----> 
<div class="d-flex justify-content-start"> 
  <div class="custom-datepicker input-daterange input-group" id="datepicker"> 
    <input type="text" class="input-sm form-control" name="from" placeholder="startdate"/> 
    <span class="input-group-addon">To</span> 
    <input type="text" class= "input-sm form-control" placeholder="enddate"/> 
  </div> 
</div><br>

Then add this CSS (make sure it comes after Bootstrap's CSS file so it overrides defaults):

.custom-datepicker {
  max-width: 400px; /* Adjust this value to your desired width */
  width: 100%; /* Ensures it shrinks on smaller screens */
}

3. Narrow the Individual Input Fields (Optional) #

If the main issue is the input fields themselves being too wide, you can use Bootstrap's width utility classes (like w-75) on the inputs. Note: This might affect the spacing around the "To" separator, so test it out:

<input type="text" class="input-sm form-control w-75" name="from" placeholder="startdate"/>
<input type="text" class= "input-sm form-control w-75" placeholder="enddate"/>

Pick the method that fits your layout best—all of them play nicely with Bootstrap's existing styling!

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