如何使用 Bootstrap 精确定位标题？

Question

下面是我的项目图片和我想要实现的布局。在下面的示例中，我使用图像作为背景，然后使用相对和绝对定位来定位标题（临时解决方案，只是为了显示布局）。问题是，我希望布局是响应式的，在这种情况下不是...

我想要达到的目标：

• 按照下图中的方式定位标题（需要对每个设备保持响应）
• 用背景颜色替换背景图像（但无论屏幕宽度如何，都必须保持宽：高 - 1:1 的比例）
• 我想实现容器 div（标题 7）的圆形外观，就像它左侧的图像一样，但如果我将固定高度和边框半径设置为 100%，在较小的屏幕上查看时它会中断

提前致谢！

Layout

/////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// /////////////////

在这里找到解决方案：

Maintain the aspect ratio of a div with CSS

Answer 1

这就是我将如何实现这一点。

<div class="col-md-3"></div>
<div class="col-md-3 col-md-offset-3"></div>
<div class="col-md-6"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>

<div class="col-md-12></div>

这种简单的布局将允许您正确设置所有列。然后您只需将内容放入其中，引导程序会自动将这些设置为响应式。当您可以更改填充/边距等以按您喜欢的方式设置样式时，我不知道为什么您有相对位置。

我上面的代码只是简单的布局来实现你的布局，分别填充它们，你应该会看到结果。

圆形图片 = 边框半径：30 像素（及以上取决于图片的大小，所以请随意调整。不需要百分比。）

标题，使用 h1 标签将它们放置在列中，使用类设置样式并将它们居中。

如果你想在图片上放置文字，你可以只填充：-20px;甚至文本上的边距 -20px 来移动它，但你可以通过 text-align: center/left/right; 来实现这一点。然后显然是z-index图像和文本，确保文本像z-index：10并且图像是z-index：5；将文本放在图像上。