html - 在 bootstrap 3 中使背景元素成为绝对元素？

Question

我正在用 bootsrap 3.1 制作一些网站，我的某些元素有一些问题，我知道我可以用图片制作它，但我希望管理员允许更改图片和 txt。这就是元素的样子

我想在蓝色元素上添加图片，以便我可以轻松地将 css 中的颜色从蓝色更改为红色，反之亦然。 Txt 必须在 <p> 中轻松更改标签。在较小的屏幕上，我希望图片向上移动，但所有图片都具有蓝色背景和 txt 在图片下方向下移动。看起来像这样

有人在 boostrap 3.1 中有一些干净的 css 解决方案吗？

Answer 1

你不能为此使用 bootstraps 列

<div class="row">
<div class="col-md-6 col-xs-12">your image here</div>
<div class="col-md-6 col-xs-12">your text here</div>
</div>

md-6 列用于您的第一个示例(中级和更高级别)，xs-12 用于将图像堆叠在文本之上。

这是文档:http://getbootstrap.com/css/#grid

编辑:要更改背景颜色，请为小型设备设置背景颜色，当您想要它为蓝色时，然后在正确的类中更改它(在我的示例中我使用的是平板电脑及更高版本):

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
.yourDiv {background:red}

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { .yourDiv {background:blue} }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

不要忘记，bootstrap 3 是移动优先的。