如何在图像上响应地调整div大小？

Question

我正在尝试在响应式Bootstrap设置中在部分图像上创建文本框。

我的最终目标是能够使用jQuery将此文本框更新为用户在表单中键入的内容。

网站需要响应，我正在尝试找出如何让包含文本框的div进行响应调整，使其始终显示在图像的相同部分，并且大小相同图像。

我的确切问题是：

图像是卡片;在全屏幕上我的文本框完全位于卡片上。当我缩小屏幕尺寸时，文本框保持原来的大小，不再位于卡片图像的正上方。

感谢您提供的任何帮助！

Answer 1

您应该阅读responsive layouts using the bootstrap grid system上的文档。也可以查看grid template examples。

相关位将理解特定大小类的工作原理：

<div class="row">
    <div class="col-xs-12 col-md-4">...</div>
</div>

这里，col-xs-12表示在移动设备下，div占用整个行宽。 col-md-4部分指的是较大的介质，它只占行宽的1/3。

Answer 2

感谢您的帮助。我最终使用@media查询手动更改了框的大小。