Question

我在处理bootsrap 3中的嵌套列时遇到问题。问题是我有一个背景图像和一个向右浮动的文本，如下所示：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 test">
      <div class="row">
        <div class="col-sm-6 col-sm-offset-6 col-md-6 col-md-offset-6 col-xs-12">
          <div class="description">
            <p>
              TEXT DESCRIPTION
              <button type="button" class="btn btn-primary">sTART</button>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

添加测试类以获得该div的背景图像。

.test {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 300px;
  background-image: url("../img/imgage.jpg");
}

我想要的是在移动屏幕上显示包含文字描述的嵌套列时，打破新行;更确切地说，这部分代码：

<div class="row">
  <div class="col-sm-6 col-sm-offset-6 col-md-6 col-md-offset-6 col-xs-12">
    <div class="description">
      <p>
        TEXT DESCRIPTION
        <button type="button" class="btn btn-primary">Start</button>
      </p>
    </div>
  </div>
</div>

因此，文本描述在新行中跳转到背景图像下方。 PS：我不想对两个不同的div使用相同的代码，并使用响应性实用程序控制，例如：hidden-xs。

这是到目前为止我所做的Plunker链接： Plunker code example

跳转到bootstrap3中

0 个答案: