如何在引导程序中将一列列表拆分为不同的行答案

【问题标题】：How can i split a column of list in different rows in bootstrap如何在引导程序中将一列列表拆分为不同的行
【发布时间】：2019-06-12 06:03:53
【问题描述】：

我正在使用带有 reactjs 的引导程序。我正在从数组列表中获取数据，并且该数据应该显示在屏幕上，但是当我尝试时，我得到了垂直方向的数据列表。我想在一行中只制作 4 个元素，然后它应该像计算器中的按钮一样制作另一行。我尝试使用引导网格来做到这一点，但它没有用。

这是我的代码。在这里，我通过映射并将数据传递给不同的组件

PadButtons = this.props.currentPadBank.map((drumObj, i, padBankArr) => {
      return (
        <PadButton
          key={padBankArr[i].id}
          clipId={padBankArr[i].id}
          clip={padBankArr[i].url}
          keyTrigger={padBankArr[i].keyTrigger}
          keyCode={padBankArr[i].keyCode}
        />
      );

然后我在这里显示数据

<div id="display">
        <button
          className="drum-pad btn btn-secondary btn-lg"
          onClick={this.playSound}
          id={this.props.clipId}
        >
          <audio id={this.props.keyTrigger} src={this.props.clip} />
          {this.props.keyTrigger}
        </button>
      </div>

This is my codesandbox Link

【问题讨论】：

标签： reactjs twitter-bootstrap bootstrap-4

【解决方案1】：

进行以下更改

在 Drumpad.js 中

<div className="container">
    <div className="row">{PadButtons}</div>
</div>

在 PadButton.js 中

<div id={`display-${this.props.keyTrigger}`} className="col-sm-3">
    <button
      className="drum-pad"
      onClick={this.playSound}
      id={this.props.clipId}>
      <audio id={this.props.keyTrigger} src={this.props.clip} />
      {this.props.keyTrigger}
    </button>
</div>

查看更新的https://codesandbox.io/s/7ymd7

基本上，您必须在重复的元素上添加col-sm-3 类，并且它必须在包装器row div 内。

【讨论】：