Как я могу разделить столбец списка в разные строки в начальной загрузке

Question

Я использую бутстрап с реактивами.Я получаю данные из списка массива, и эти данные должны отображаться на экране, но при попытке получить список данных в вертикальном направлении.Я хочу сделать только 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>

Это мои коды и ссылки Ссылка

Answer 1

Внести следующие изменения

In 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.