Question

我正在将React与Bootstrap结合使用，并且渲染了这样的卡片列表：

render() {
    const stocks = this.props.stocks.map(stock => {
        return <StockListItem symbol={stock.symbol} name={stock.name}/>
    });

    return (
        <div className="card card-sec m-b-30">
            <div className="card-body">
                <h4 className="mt-0 header-title">List of Stocks</h4>
                <ul className="list-inline widget-chart m-t-20 text-center">
                    <li>
                        <h4 className=""><b>500</b></h4>
                        <p className="text-muted m-b-0">Company</p>
                    </li>
                    <li>
                        <h4 className=""><b>505</b></h4>
                        <p className="text-muted m-b-0">Stock</p>
                    </li>
                    <li>
                        <h4 className=""><b>1</b></h4>
                        <p className="text-muted m-b-0">Portfolio</p>
                    </li>
                </ul>
                <div class="card-group">
                    {stocks}
                </div>
            </div>
        </div>
    );
}

列表项如下：

render() {
    return (
        <div class="card text-center" style={{width: '15rem'}}>
            <div class="card-body">
                <h5 class="card-title">{this.props.symbol}</h5>
                <p class="card-text">{this.props.name}</p>
                <a href="#" class="btn btn-primary">Add</a>
            </div>
        </div>
    );
}

问题是，如果有足够的空间，如何将卡彼此并排渲染，如果没有足够的空间，则将以下内容放入新行中。
我知道Bootstrap中的row类，但是问题是项目已渲染，我不知道将该类放在何处。

Answer 1

使用具有display: flex;和flex-wrap: wrap;属性的容器包装整个组件内容。

.container {
  display: flex;
  flex-wrap: wrap;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">

  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Card text</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Card text</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Card text</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Card text</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Card text</p>
    </div>
  </div>

</div>

填充当前行时引导新行

1 个答案: