Question

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

Answer 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内。

我如何在引导程序的不同行中拆分列表的列

1 个答案: