Question

我在Bootstrap 3.3.6中实现设计模型时遇到了困难

我附上了一张图片，概念性地展示了我尝试做的事情：

蓝色背景是图像。灰色区域是文本框（其中一个还包含一个表单），它们位于顶部＆＃34;的背景图片。整件事需要做出回应。

我从查看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');">

上图是555像素高，但没有完全显示，因为.container-fluid内没有内容可以给它高度。

因此，我为3个灰色框添加了一些div＆＃39}。我这样做是通过创建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/。它没有按预期工作。一些问题：

如何制作背景图像以使其完整高度可见（即使.container-fluid内的内容不足），以及它的响应能力如何？< / p>
如何解决灰盒对齐的问题？我需要它们之间的一些空间，并让它们出现在模型中显示的位置。我不明白为什么底部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一个height。

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

1 个答案: