引导卡在反应中没有水平排列答案

【问题标题】：bootstrap cards do not line up horizontally in react引导卡在反应中没有水平排列
【发布时间】：2021-03-31 03:30:25
【问题描述】：

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

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 >
        }

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

【问题讨论】：

你试过给你的 wrapper 一个 display flex 和 flex-direction 行吗？
根据您的代码，看起来您将所有内容映射到一个列而不是行，对吗？我认为 Bootstrap 用类区分行和列？
还有关于你的类名。 card-title 和 card-text 是 Bootstrap 类，总是垂直堆叠。

标签： reactjs alignment react-bootstrap card

【解决方案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>
      }

【讨论】：