BootStrap3在手机上显示效果有问题input,type="date"

Question

BootStrap3在手机上显示效果有问题input,type="date"

文字底部会被挡住,怎么解决?

type="text"的就没问题

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

这个问题是由于Bootstrap 3的响应式设计导致的。在移动端，Bootstrap 3的日期选择器（type="date")会自动调整大小以适应屏幕尺寸。如果你希望保持输入框和日期选择器之间的距离，你可以使用Bootstrap提供的form-control-static类。

<div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control-static" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>

在这个例子中，我们创建了一个表单组，并设置了class="form-group"。然后我们在表单组内添加了一个输入字段，并设置其type="email"属性。最后，我们将form-control-static类应用到这个输入字段上，以确保它不会覆盖日期选择器。

这样做的好处是可以保留输入框和日期选择器之间的空间，使页面看起来更整洁。