时间戳

首页 > 解决方案 > 如何在引导程序中将一列列表拆分为不同的行

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

问题描述

我正在使用带有 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>

这是我的代码框链接

标签： reactjstwitter-bootstrapbootstrap-4

解决方案

进行以下更改

在 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类，并且它必须在包装器rowdiv 内。

推荐阅读