Question

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

我想要实现的目标：

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

提前致谢！

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

在这里找到解决方案：

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>

这种简单的布局将允许您正确设置所有列。然后你只需将你的内容放在里面，bootstrap会自动将这些内容设置为响应。我不知道为什么你有位置亲戚，你可以改变填充/边距等，以便按你喜欢的方式设置它。

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

圆形图像= border-radius：30px（以上取决于图像的大小，因此不需要百分比。）

标题，使用h1标记将它们放在列中，使用类对其进行样式设置并将其居中。

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

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

1 个答案: