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结构？在这种情况下，引导程序中内置的类应该适用吗？

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

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

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

Answer 1

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

带Bootstrap的流体网格系统

1 个答案: