Question

我是全新的bootstrap，已经使用了一个星期。我正在给我女朋友送圣诞礼物，我真的被困了。

我想在背景上放置一张图片和一个短文本（彼此相邻）。图像看起来非常像这样：enter image description here 它完全位于左侧，旁边有文字。（图像和文本之间以及文本和右侧屏幕末端之间也有一点位置。图片从屏幕开始的左侧开始。）

我也希望一切都能得到回应。

我尝试了一切，但它从未真正起作用，我在这个问题上浪费了2天。我真的无法独自完成！请帮助!!!

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

在bootstrap 3.x＆＃34; .row-fluid＆＃34;班级已改为＆＃34; .row＆＃34;和＆＃34; .span *＆＃34;课程已更改为＆＃34; .col - *＆＃34;。我对您的代码进行了一些更改，并使其按照图片链接中的说明进行操作，请点击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;}

Answer 2

我不确切地知道你的意思，但这就是我认为你的意思。 JsFiddle

:)

Answer 3

我想要这样的东西： NORMAL 并在移动视图中这样的事情： MOBILE

但是非常感谢！：）

Answer 4

当在rraman的答案中使用Bootstrap时：由于文本可以包含的内容比一个“ Lorem ipsum”更多，因此在较小的屏幕上，图像div的文本div的高度也会变大，即使您的图像具有img响应（img -fluid），下面将留有空白。要解决此问题，您可以在img上使用此CSS：

height: 100%;
width: 100%;
object-fit: cover:
object-position: 50% 50%; //for always to show image center

如何在背景上使图像和文本在彼此旁边相互响应？

4 个答案: