如何在Bootstrap网格系统中将图像高度与它旁边的div对齐？

Question

我想将img元素和div元素对齐在同一行中，如下所示：

（按钮应与图像底线水平对齐。顶边相同）

我想在移动设备（sm，例如iPad）中完美地对齐它们

** index.html **

<div class="row">
    <!-- IMAGE -->
    <div class="col-md-8">

        <div class="thumbnail relative margin-bottom-3">
            <figure style="position: relative; overflow: hidden;">
                <img class="img-responsive" id="product-image" src="" alt="shop first image" style="width:610px; height:352px;">
            </figure>
        </div>
    </div>
    <!-- /IMAGE -->

    <!-- ITEM DESC -->
    <div class="col-md-4">
        <div class="clearfix margin-bottom-15">
        </div>

        <div class="form-group">
             {% crispy item_form %}
        </div>

    </div>
    <!-- /ITEM DESC -->
</div>

我该如何实施？

Answer 1

好的，让我试着回答一下。

现在让我们来自bootstrap并做传统代码。更多打字。

＆＃13;

＆＃13;

section{
display:flex;
flex-wrap:wrap;
flex-direction:column;
position:relative;
width:100%;
height:200px;
margin:0;
padding:0;
border:1px black solid;}

.withImage{
display:flex;
width:70%;}

.withImage img{
width:100%;}

.withForm{
width:30%;
height:100%;
padding:0;
align-items:center;
position:relative;}

form{
width:100%;
height:100%;}

.withForm ul{
list-style:none;
padding:0;
margin:0;
width:100%;
height:100%;
display:flex;
flex-wrap:wrap;
flex-direction:row;
justify-content:center;

}

.withForm li{
width:80%;
}
.withForm li:last-child{
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.withForm input{
width:50%;
margin:0px;}

＆＃13;

<section>
  <div class="content withImage">
    <img src="http://imagecolony.com/wp-content/uploads/2016/09/Wallpaper-Wide-803.jpg">
  </div>
  <div class="content withForm">
    <form>
    <ul>
      <li>text <input type="text" placeholder="sometext"></li>
      <li>text <input type="text" placeholder="sometext"></li>
      <li>text <input type="text" placeholder="sometext"></li>
      <li>text <input type="text" placeholder="sometext"></li>
      <li><input type="submit" placeholder="enter"></li>
    </ul>
      </form>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

如果你使用flex应该会更容易，首先我敢打赌你永远不会检查你的代码。如果您使用chrome运行脚本，请右键单击并检查您的css发生了什么。

你可以找到它all about flex in here

希望它会有所帮助。