响应式图像之上的响应式表单？ - 引导程序答案

【问题标题】：Responsive Form on top of Responsive Image? - Bootstrap响应式图像之上的响应式表单？ - 引导程序
【发布时间】：2015-09-26 10:56:51
【问题描述】：

我正在尝试在响应式图像上放置一个表单，并且我想让表单也具有响应性并根据图像调整大小

目前图像是响应式的，但我无法将表单粘贴在图像上的一个位置并在其相同位置调整大小

这可能吗？

当前代码：http://www.codeply.com/go/FFgsRfictx

【问题讨论】：

最简单的方法是使用响应式框架，例如 Foundation/Bootstrap。就像将框架 css 添加到您的网页中，并将相应的类名添加到元素一样简单
我的代码正在使用引导程序 - 但是我无法让表单响应
再看看你的代码，你已经在使用 bootstrap，你应该利用 bootstrap 提供的功能。使用 col-sm-N 类属性设置宽度，并将图像设置为表单元素的背景。不推荐您当前设计视图的方式
你能提供一个例子吗？对网格布局不太熟悉
好的，给我几分钟，我来举个例子

标签： html css forms twitter-bootstrap

【解决方案1】：

以下仅对应于您提供的页面的表单部分。

我删除了图像元素并将资源链接用作表单元素的背景图像。表单字段由引导类包装。

已在表单元素上设置了最小高度，以防止背景图像过度失真。

HTML：

<!--- bootstrap style sheet -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


<!-- form section -->
<section id="contact class" class="container content-section text-center">

  <h1 class="brand-heading">Contact</h1>

  <div class="container-fluid">
    <div class="row">
      <!--- 
        under the grid system, one row has can have 12 columns 
        we'll use 3 columns on each side for spacing,
        6 columns for the form.

        the form is done the bootstrap way, less the validation.
        you need to add in hte missing fields yourself.
      --->
      <div class="col-md-3"></div>
      <div class="col-md-6">
          <form id="responsiveForm" action="">

            <div class="form-group">
              <label for="name">Name:</label> 
              <input type="text" class="form-control" id="name" name="name"/>
            </div>
            <div class="form-group">
              <label for="email">Email:</label> 
              <input type="text" class="form-control" id="email" name="email"/>
            </div>
            <div class="form-group">
              <label for="occasion">Occasion:</label> 
              <input type="text" class="form-control" id="occasion" name="occasion"/>
            </div>
            <div class="form-group">
              <input type="submit" name="submit" class="form-control btn btn-primary" value="go"/>
            </div>

            </div>
          </form>
        </div>
      <div class="col-md-3"></div>
    </div>
  </div>

</section>

CSS：

#responsiveForm{
  background-image: url("http://s02.justpaste.it/files/justpaste/d233/a9446587/playingcardtemplate_small.png");
  background-size: cover;
  background-size: 100% 100%;

  min-height: 650px;
  padding: 80px;
  padding-top: 120px;
}

见Codepen

编辑：只是对图像的一点思考。如果您想为表单使用背景。您应该先完成表格，然后找出表格的大小并将您的图像塑造成这个比例。

【讨论】：

【解决方案2】：

试试这样：

.formOuterContainer {
  position: relative;
}    

.formInnerContainer {
  position: absolute;
  left: 72px;
  right: 72px;
  top: 80px;
  bottom: 84px;

  display: flex;
  align-items: center;
  justify-content: center;
}

【讨论】：