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

Question

我正在尝试在响应式引导设置中的部分图像上创建一个文本框。

我的最终目标是能够将此文本框更新为用户使用 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的意思是在一个mobile下，div占据了整个行宽。 col-md-4部分指的是更大的介质，只占行宽的1/3。

Answer 2

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