html - Bootstrap - 响应式背景图像，顶部有 3 列内容

Question

我在 Bootstrap 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;
}

我在这里为它设置了一个 fiddle https://jsfiddle.net/fku5wffn/1/ .它没有按预期工作。一些问题:

1. 如何制作背景图片，使其整个高度可见(即使 .container-fluid 中的内容不足)，并且它是响应式的？

2. 如何解决灰框对齐问题？我需要它们之间有一些空间，并让它们出现在模型中显示的位置。我不明白为什么最后两个出现在他们在 fiddle 上的位置。

这甚至可能吗，或者我应该告诉设计模型的人这是不可能完成的——尤其是在能够响应式地正常工作的情况下？

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

这也是一个 fiddle :https://jsfiddle.net/dz7cbgdp/2/

要在没有内容时显示背景图像，您可以为 div 指定一个 height。