我有一个容器的以下html结构,它包含一个无序的元素列表
<div className="container">
<ul className="list-group">
<li className="list-group-item">
<div className="items col-md-3"><p>Username: {this.props.username}</p></div>
<div className="items col-md-3"><p>First Name: {this.props.firstName}</p></div>
<div className="items col-md-3"><p>Last Name: {this.props.lastName}</p></div>
<div className="items">
<button className="btn btn-success btn-xs">{this.props.status}</button>
</div>
<div className="items">
<span className="glyphicon glyphicon-plus-sign"></span>
</div>
<div className="items">
<span className="glyphicon glyphicon-remove-circle"></span>
</div>
<div className="items">
<span className="glyphicon glyphicon-arrow-up"></span>
</div>
</li>
</ul>
</div>
布局最初看起来不错,但在调整浏览器大小后,一些元素开始失去流动性。有人可以帮我指出我如何改进上面的html结构?在这种情况下,引导程序中内置的类应该适用吗?
我还添加了一些额外的样式
<style type="text/css">
.items{
display: inline-block;
}
button{
width: 100px;
}
.glyphicon{
padding-left: 30px;
}
</style>
编辑:我也在使用React,因此“className”而不是“class”