html - 使用 Bootstrap 的流体网格系统

Question

我有一个容器的以下 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 结构吗？ bootstrap 中的哪些内置类应该适用于这种情况？

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

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

编辑:此外，我正在使用 React，因此使用“className”而不是“class”

Answer 1

您应该尝试使用 Bootstrap 的 container-fluid类。