reactjs - 引导卡在反应中没有水平排列

Question

我的引导卡有问题，当我插入代码时，它们只是垂直排列，一个在另一个下方，我通过映射响应来做到这一点

return (

        
            <div className="container">
                {array.map(name => (
                    < div class="card-columns ">
                        <div class='col'>
                            <div class="card ">
                                <img class="card-img-top" src=name.img" alt="Card image cap" />
                                <div class="card-body">
                                    <h5 class="card-title"> name.title </h5>
                                    <p class="card-text"> name.description</p>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div >
        }
       

有什么方法可以对齐它，使其彼此相邻？

标签： reactjsalignmentreact-bootstrapcard

Answer 1

请按此顺序进行

      return (
      <div className="container">
        <div class="row">
          {array.map((name) => (
            <div class="col-sm-4">
              <div class="card ">
                <img class="card-img-top" src={name.img} alt="Card image cap" />
                <div class="card-body">
                  <h5 class="card-title"> {name.title} </h5>
                  <p class="card-text"> {name.description}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      }