html - 如何使图像和文本在背景上彼此相邻响应？

Question

我对 bootstrap 完全陌生，已经使用它大约一个星期了。我目前正在为我的女朋友准备一份圣诞礼物，但我真的被困住了。

我想在背景上放置图片和短文本(彼此相邻)。该图像看起来真的很像:enter image description here它完全靠左，她旁边有文字。 (图像和文本之间以及文本和右侧屏幕末尾之间也有一些位置。图片从屏幕开始的左侧开始。)

我也希望一切都能响应。

我尝试了所有方法，但从未真正奏效，我在这个问题上浪费了 2 天时间。我一个人真的不行!请帮忙!!!

.section_1 {
  position: relative;
  color: #fff;
  background-color: #bdbdbd;
}
.picture {
  content: url(http://i.stack.imgur.com/Zlrxu.png);
  width: 50%;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.text {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 20px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section class="section_1">
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="picture">
        <div class="span2">
        </div>
        <div class="span10">
          <div class="text">
           <p>Lorem ipsum</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

在 Bootstrap 3.x 中，“.row-fluid”类已更改为“.row”，“.span*”类已更改为“.col-*”。我对您的代码做了一些更改，并使其按照您的图片链接中给出的方式运行，请单击 here用于 plunker 演示。

HTML 文件:

<section class="section_1">
<div class="container-fluid picture">
    <div class="row ">
        <div class="col-sm-5">
          <img src="http://i.stack.imgur.com/Zlrxu.png" class="img-responsive"/>
        </div>
        <div class="col-sm-7 text"><p>Lorem ipsum</p></div>
    </div>
    </div>

CSS 文件:

.section_1 {
color: #fff;
background-color: #bdbdbd;}

.text {
font-size: 16px;
font-weight: 300;
color: rgba(255, 255, 255, .7);
vertical-align: middle;}