引导 - 与内容3列响应背景图像上顶

Question

我有在引导3.3.6

实现设计样机的困难我们已经附上图片，以展示概念我想要做的事：

蓝色背景是一个图像。灰色区域是文本框（其中一个还包含表单），它们位于背景图像的“顶部”。整个事情需要有响应。

我开始通过观察How to put a background image on a Bootstrap form?和Responsive Form on top of Responsive Image? - Bootstrap

所以我添加的图像（由上述样机蓝色表示）到.container-fluid作为背景图像：

<div class="container-fluid" style="background-image: url('http://via.placeholder.com/1773x555');"> 

上述图像是555px高，但没有完全显示，因为.container-fluid内没有内容可以提供高度。

因此，我为3个灰色框添加了一些div。我通过创建2个.row类然后插入.col-md-6来实现这个功能。下面的代码：

<div class="container-fluid" style="background-image: url('http://via.placeholder.com/1773x555');"> 

    <div class="row"> 

     <div class="col-md-6"> 

     </div> 

     <div class="col-md-6 content"> 
      <h1> 
      Content here 
      </h1> 
     </div> 

    </div> 

    <div class="row"> 

     <div class="col-md-6 content"> 
     <h1> 
      Content here 
      </h1> 
     </div> 

     <div class="col-md-6 content"> 
      <h1> 
      Content here 
      </h1> 
     </div> 

    </div> 

</div> 

我还添加了.content类样式的灰色盒子。这些都需要是相同的大小，但我想确切的尺寸小于可进行调整：

.content { 
    background-color: #2C3582; 
    min-height: 200px; 
    width: 400px; 
    padding: 10px; 
} 

我已经建立了一个捣鼓在这里https://jsfiddle.net/fku5wffn/1/。它不按预期工作。有些问题：

1. 如何让我的背景图像，它的整个高度（即使有没有内部.container-fluid足够的内容），所以它的响应？

2. 如何解决灰盒对齐问题？我需要一些空间，并让他们出现在模型中显示的位置。我不明白为什么底部2会出现在小提琴上。

这甚至可能，或者我应该告诉谁设计的样机它不能做的人 - 尤其是在的方式，将正常工作响应？

Answer 1

我用flexbox尝试，使容器，如在画面

.container-fluid { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: flex-end; 
} 

.other-row { 
    display: flex; 
    justify-content: space-between; 
    width:100%; 
} 

div .other-row:after, 
div .other-row:before { 
    display: none; 
} 

这里是一个小提琴太：https://jsfiddle.net/dz7cbgdp/2/

为背景图像时没有内容显示，你可以给div a height。