按鈕不與div對齊

Question

所以我想讓這個管理頁面響應，當我調整頁面時有一些問題。我希望庫存中的div與3個按鈕對齊。

這是我的容器調整視時需要適當調整。

.reports{ 
 
    \t border: 1px solid red; 
 
    \t overflow-y: scroll; 
 
    \t /*overflow-x: hidden; */ 
 
    \t height: 100%; 
 
    } 
 
    
 
    .row{ 
 
    \t height: 4.5em; 
 
    \t width: 100%; 
 
    \t margin-left: 0; 
 
    } 
 
    
 
    .actions{ 
 
    \t float: right; 
 
    \t width: 30%; 
 
    } 
 
    .entry-group{ 
 
    \t border: 1px solid red; 
 
    \t float: left; 
 
    \t width: 70%; 
 
    } 
 
    
 
    .title{ 
 
    \t border: 1px solid red; 
 
    \t float: right; 
 
    \t width: 72.5%; 
 
    \t height: 3.7em; 
 
    \t word-wrap: break-word; 
 
    \t margin-left: 2em; 
 
    }

<div class="reports"> 
 
    \t <div class="list-group-item row"> 
 
    \t \t <div class="entry-group"> 
 
    \t \t \t <button class="btn btn-primary date" >2016-09-19</button> 
 
    \t \t \t \t \t \t \t \t \t \t 
 
    \t  \t \t <div class="title"> 
 
    \t \t \t \t <h4 class="list-group-item-heading">2080136 - Inventory</h4> 
 
    \t \t \t \t <p class="list-group-item-text">2 Napier Court West Southend On Sea SS1 1JU</p> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t \t \t \t \t \t \t \t 
 
    \t \t <div class="actions"> 
 
    \t \t \t <button class="btn btn-primary download">Download</button> 
 
    \t \t \t <button class="btn btn-primary edit">Edit</button> 
 
    \t \t </div> 
 
    \t </div> 
 
</div> 
 

Answer 1

我認爲這裏的代碼的幾個問題。首先，我認爲你的'tr'和'td'之間有DIV，並且沒有'table'元素是很奇怪的。

我認爲你正在嘗試混合不同的做事方式：bootstrap和HTML表格。

我的建議是使用類似layoutit.com的東西來建立一個佈局，divs只在bootstrap中。您仍然可以輕鬆地將其集成到您的後端技術中，並通過編輯類名來獲得div的響應。 COL-SM-1。

據我所知，你想要使用表格報告，說，它應該完全進行，沒有中間divs。

Answer 2

補充一點：

.list-group-item-heading { 
    margin-top: 0; 
} 

https://jsfiddle.net/kefhvc7y/

Answer 3

地址：

.title h4 { 
    margin-top: 0px; 
} 
.date { 
    float: left; 
} 

和.title刪除margin-left: 2em;。

這是你的提琴的更新版本：https://jsfiddle.net/r11p5n4d/