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

Question

我想像这样将img元素和div元素对齐：

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

我也想在移动设备（例如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

好吧，让我尝试回答这个问题。

现在，让我们脱离引导并执行传统代码。 更多打字。

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

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

如果您使用flex，它应该会更容易一些，而且首先，我决不要检查您的代码。 如果您使用的是chrome运行脚本，请右键单击并检查CSS发生了什么。

您可以在此处找到有关flex的全部信息

希望会有所帮助。