Question

我有两个引导程序列，一个具有表单，另一个具有图像。图像分割设置为100％宽度，当调整屏幕大小时，它将响应。但是，无论屏幕大小如何，表单都应处于相同的高度。

enter image description here

请参考以下代码

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-page-contents">
  <div class="row">
    <div class="col-md-6">
      <p class="headingdescription" style="padding-left:0px;text-align:left">Request a Office space</p>
      <p>Bla bla bla</p>
      <div class="col-md-6" style="padding-left:0px">
        <input class="formtextarea" placeholder="Full Name " />
        <input class="formtextarea" placeholder="Job Title" />
        <input class="formtextarea" placeholder="Phone Number" />
      </div>
      <div class="col-md-6" style="padding-left:0px">
        <input class="formtextarea" placeholder="Business Name" />
        <input class="formtextarea" placeholder="Email Address" />
        <input class="formtextarea" placeholder="Zipcode" />
      </div>
      <input class="formtextarea" placeholder="Message" style="height: 100px !important" /> <br> <br>
      <button class="actionbuttons" href="">SUBMIT REQUEST</button> &nbsp;&nbsp; &nbsp;&nbsp;
    </div>
    <div class="col-md-6">
      <img src="http://dummyimage.com/600/f0d/&text=illo.png" width="100%">
    </div>
  </div>
</div>

预先感谢您的帮助。

Answer 1

据我了解，您希望图像变小时将其与表单底部对齐。您可以将列本身与类mt-auto（margin-top：自动）对齐。

演示：

form {
  background: yellow;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="text-page-contents">
  <div class="row">
    <form class="col-md-6 mt-auto ">
      <p class="headingdescription" style="padding-left:0px;text-align:left">Request a Office space</p>
      <p>Bla bla bla</p>
      <div class="col-md-6" style="padding-left:0px">
        <input class="formtextarea" placeholder="Full Name " />
        <input class="formtextarea" placeholder="Job Title" />
        <input class="formtextarea" placeholder="Phone Number" />
      </div>
      <div class="col-md-6" style="padding-left:0px">
        <input class="formtextarea" placeholder="Business Name" />
        <input class="formtextarea" placeholder="Email Address" />
        <input class="formtextarea" placeholder="Zipcode" />
      </div>
      <input class="formtextarea" placeholder="Message" style="height: 100px !important" /> <br> <br>
      <button class="actionbuttons" href="">SUBMIT REQUEST</button> &nbsp;&nbsp; &nbsp;&nbsp;
    </form>
    <div class="col-md-6 mt-auto">
      <img src="http://dummyimage.com/600/f0d/&text=illo.png" width="100%">
    </div>
  </div>
</div>

注意，父级的align-items-end类也可以使两列都对齐到底部。

form {
  background: yellow;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="text-page-contents">
  <div class="row align-items-end">
    <form class="col-md-6 ">
      <p class="headingdescription" style="padding-left:0px;text-align:left">Request a Office space</p>
      <p>Bla bla bla</p>
      <div class="col-md-6" style="padding-left:0px">
        <input class="formtextarea" placeholder="Full Name " />
        <input class="formtextarea" placeholder="Job Title" />
        <input class="formtextarea" placeholder="Phone Number" />
      </div>
      <div class="col-md-6" style="padding-left:0px">
        <input class="formtextarea" placeholder="Business Name" />
        <input class="formtextarea" placeholder="Email Address" />
        <input class="formtextarea" placeholder="Zipcode" />
      </div>
      <input class="formtextarea" placeholder="Message" style="height: 100px !important" /> <br> <br>
      <button class="actionbuttons" href="">SUBMIT REQUEST</button> &nbsp;&nbsp; &nbsp;&nbsp;
    </form>
    <div class="col-md-6 ">
      <img src="http://dummyimage.com/600/f0d/&text=illo.png" width="100%">
    </div>
  </div>
</div>

Answer 2

如果您希望表单以某种方式调整为与图像相同的高度，则不会发生这种情况。

图像做出响应的原因是它具有宽高比。这意味着，它具有自己的本机高度和宽度。您在这里所做的只是设置宽度，并且由于长宽比，图像高度会相应调整。

表单元素默认情况下具有固定大小。它们不应该像图像一样缩放。

您可以做的是在输入上设置100％的宽度，并使该宽度由父容器的宽度确定。但这不会以任何方式影响表单元素的高度。

该css如下所示：

input[type="text"] {
    width: 100%;
    /*you also need to change box-sizing,
    since the input itself already has a padding
    and a border and would exceed the boundaries
    of the parent container because of that:*/
    box-sizing: border-box;
}

请注意，我已经使用过[type="text"]。仅当您在输入中设置文字类型时，此选择器才起作用：

<input type="text" class="formtextarea" placeholder="Business Name">

如果您希望布局根据屏幕的宽度或高度进行调整，建议您查看CSS中的媒体查询。

Answer 3

可以用Bootstrap完成，但有3个问题需要克服：

图片必须是其父级高度的100％，但不能影响其父级列的高度。 解决方案：：使其成为背景图像：

<div class="col-md-6 col-sm-12 image-col">

<style>
  .row .image-col {
    background-image: url(url(http://dummyimage.com/600/f0d/&text=illo.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center right;
  }
</style>

当窗口小于中等大小（<768px）时，图像将包裹在窗体下方，并且高度将折叠。 解决方案：通过媒体查询为该情况设置图像高度：

/* small screens (the default) */
<style>
  .row .image-col {
    background-image: url(http://dummyimage.com/600/f0d/&text=illo.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 20rem;    /* image height when image wraps underneath form */
    background-position: center right;
  }

  /* medium and greater screens */  
  @media (min-width: 768px) {
    .row .image-col:last-child { 
      background-size: auto 100%;
      height: auto;
    }
  }
</style>

对于小屏幕（小于中等尺寸，当图像环绕在窗体下方时），我们需要两列的宽度均为100％。因此，我们需要通过引导程序通过在两列中添加类col-sm-12来指定它。

这里是working fiddle。

如何使引导行的两列（一个具有表单，一个具有图像）具有相同的高度，并且也响应

3 个答案: