按钮没有与div对齐

Question

所以我试图让这个管理页面响应，当我调整页面大小时会出现一些问题。我希望带有库存的div与3个按钮对齐。

这是我的容器，在调整视口大小时需要适当调整。

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

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

Answer 1

我认为这里的代码存在一些问题。首先，我认为在'tr'和td'之间存在DIV并且没有'table'元素会很奇怪。

我认为你正在尝试混合不同的做事方式：bootstrap和HTML表。

我的建议是使用类似layoutit.com的东西来构建一个只在bootstrap中使用div的布局。您可以轻松地将其集成到您的后端技术中，并通过编辑类名来响应div，例如： COL-SM-1。

据我所知，您希望将表用于报表，但是，它应该完全执行，中间没有div。

Answer 2

添加：

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

https://jsfiddle.net/kefhvc7y/

Answer 3

添加：

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

并从margin-left: 2em;移除.title。

以下是您的小提琴的更新版本：https://jsfiddle.net/r11p5n4d/