如何在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開始，做傳統的代碼。更多的打字。

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發生了什麼。

你可以找到它all about flex in here

希望這將是幫助。