Question

我正在尝试使用以下image定位的引导程序布局。

我有两行，上半部分和下半部分都包含两个独立的背景渐变。这些行都分为50％宽的列，最右边的列包含内容，最左边的列包含单个图像。

我的问题是，我不确定如何让一个元素垂直跨越两行，同时仍然保留它的流畅布局。我绝对定位它但是一旦窗口缩小它就不能正确堆叠。我的布局如下。摆脱行并将页面分成两个垂直列导致我不确定如何将背景分成两个单独的水平渐变。任何帮助，将不胜感激。谢谢！

<div class="row" style="height:50%;background-image:-webkit-gradient(etc)">
  <div class="col-md-6">
    <img src="wooo-im-an-image">
  </div>
  <div class="col-md-6">
    content of a mostly blabberous nature here
  </div>
</div>
<div class="row" style="height:50%;background-image:-webkit-gradient(etc)">
  <div class="col-md-6">
    emtpy
  </div>
  <div class="col-md-6">
    more content of a mostly blabberous nature here
  </div>
</div>

Answer 1

我不确定我是否完全明白，但我确实用你的照片拼凑了一个例子。请原谅CSS技能并告诉我它是否对您有所帮助。

<div class="row gradient">
    <div class="col-md-6"><div class="well inheritback">IMG<br><br><br><br><br></div></div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12"><div class="well inheritback">CONTENT</div></div>

        </div>
      <div class="row">
            <div class="col-md-12"><div class="well inheritback">CONTENT</div></div>

        </div>
    </div>
</div>

现场演示

http://www.bootply.com/116896

Bootstrap，在保留响应性的同时跨越两行图像

1 个答案: