如何实现Admin LTE中small-box组件的并排布局？

Admin LTE 基于 Bootstrap 框架，要让 small-box 并排显示，直接利用 Bootstrap 的网格系统即可，具体操作如下：

• 给所有 small-box 套一个外层的 row 容器，触发横向布局规则
• 给每个 small-box 单独套一个 col-* 类的容器，* 代表组件占的列宽（比如 col-md-3 表示中等及以上屏幕占3列，一行最多放4个；col-sm-6 表示小屏幕占6列，一行放2个）

修改后的代码示例：

<div className="container-fluid">
  {/* 新增row容器，承载并排的small-box */}
  <div className="row">
    {/* 每个small-box外层套col-md-3，中等屏幕一行显示4个 */}
    <div className="col-md-3">
      <div className={"small-box " + (props.item.registros > 0 ? "bg-success" : "bg-warning")}>
        <div className="inner">
          <h3>{props.item.dia}/{props.item.mes}/{props.item.ano}</h3>
          {props.item.qtd > 0 ? <p>Qtd. apontada: {props.item.qtd}</p> : ""}
        </div>
        <div className="icon">
          <i className="ion ion-stats-bars" />
        </div>
        <a href='#' onClick={e => { navigate("/Apontar/" + props.item.data) }} className="small-box-footer">Apontar <i className="fas fa-arrow-circle-right" /></a>
      </div>
    </div>

    {/* 多个small-box时，重复上述col-md-3包裹结构即可 */}
    {/* <div className="col-md-3">
      <div className="small-box ...">...</div>
    </div> */}
  </div>
</div>

补充说明： #

• 若要适配不同屏幕尺寸，可以用响应式列类，比如 col-lg-2 col-md-3 col-sm-6 col-xs-12，对应大屏幕一行6个、中等屏幕4个、小屏幕2个、超小屏幕1个
• 不要给每个 small-box 单独套 container-fluid，这个容器是全屏布局的外层容器，重复使用会破坏网格规则

内容的提问来源于stack exchange，提问作者xaotix