Bootstrap 3移动端（360px-640px）输入框文字底部截断问题求助

Hey there! Let’s tackle that annoying input text cutoff issue you’re seeing on mobile sizes (360px to 640px) with your Bootstrap 3 landing page. I’ve dealt with similar Bootstrap quirks before, so here are some targeted fixes to try out:

• Override Bootstrap’s fixed input height
  Bootstrap 3 sets a fixed height on .form-control elements by default, and combined with box-sizing: border-box, this can squeeze text when padding is added. Swap the fixed height for auto and let padding control the vertical space instead. Add this media query to your CSS:

  @media (min-width: 360px) and (max-width: 640px) {
    .form-control {
      height: auto;
      padding: 10px 12px; /* Tweak these values to match your design */
      line-height: 1.4; /* Ensure line-height matches your font size for proper alignment */
    }
  }
  

• Fix line-height conflicts
  Parent elements sometimes inherit or force a tight line-height that cuts off text. Make sure your input’s line-height is at least equal to its font-size (or slightly higher for breathing room). Avoid line-height: 1 unless your font is designed for it—most standard sans-serif fonts need a little extra space.

• Check for hidden overflow properties
  Double-check if the input or its parent container has overflow: hidden or clip-path set. These properties can accidentally clip the bottom of text, especially if the input’s height is too constrained. Use your browser’s dev tools to inspect computed styles and spot any unexpected values.

• Adjust for font baseline differences
  Some fonts have a lower baseline that makes text sit closer to the input’s bottom edge. Try adding a small extra padding-bottom or setting vertical-align: middle to nudge the text up:

  @media (min-width: 360px) and (max-width: 640px) {
    .form-control {
      vertical-align: middle;
      padding-bottom: 12px; /* Extra space to account for font baseline */
    }
  }
  

• Reset placeholder styles
  Bootstrap 3 adds custom styles to input placeholders that can sometimes interfere with the actual text alignment. Reset those styles for mobile with this snippet:

  @media (min-width: 360px) and (max-width: 640px) {
    .form-control::-webkit-input-placeholder {
      line-height: normal;
    }
    /* Add vendor prefixes for other browsers if needed */
    .form-control:-moz-placeholder {
      line-height: normal;
    }
  }
  

One quick pro tip: Use your browser’s dev tools (right-click → Inspect) to live-edit the input’s styles—this will let you test changes in real time and pinpoint exactly which property is causing the cutoff.

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