Html 自举流体网格系统

对于包含无序元素列表的容器，我有以下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>

用户名：{this.props.Username}

名字：{this.props.firstName}

姓氏：{this.props.lastName}

{this.props.status}

最初布局看起来不错，但在调整浏览器大小时，一些元素开始失去流动性。有人能帮我指出如何改进上述html结构吗？引导中的哪些内置类应适用于此场景

我还添加了一些额外的样式

  <style type="text/css">
     .items{
        display: inline-block;
     }
     button{
        width: 100px;
     }
     .glyphicon{
        padding-left: 30px;
     }
  </style>

.项目{
显示：内联块；
}
钮扣{
宽度：100px；
}
.字形图标{
左侧填充：30px；
}

---

编辑：我也在使用React，因此“className”而不是“class”

您应该尝试使用引导程序的类。

您需要使用属性“class”而不是“className”。首先，对于流体布局，您应该使用容器-fluid@Hoshts我想这是有道理的。您应该提供这样的信息，因为它对于普通html/CSS看起来非常错误。谢谢@A.Gent我可以问一下，在调整浏览器大小时，对于发布的标记中未定义class=“col”的div元素，元素定位是否会中断？我觉得为什么一些子元素在调整大小时不能正确地发光