Bootstrap Flex 和 JavaScript

问题描述

你好！因此，我打算通过对齐内容（即 style={{textAlign:"justify"}}.

）来使我的 UI 看起来更好看

因此，如果需要，项目将通过扩展自身来占据 Row 的整个宽度。

UI 现在看起来像这样。

这是我的对象（忽略相同的 Id）

const smartphones = [
    { topSearchCardId: 101,description: "Apple"},{ topSearchCardId: 101,description: "Samsung" },description: "Google" },description: "Xiomi" },description: "Huawei" },description: "LG" },description: "Nokia" },

这是我的 flex 好友。我正在使用 React 所以它是 className。

<Row>
  <div className="d-flex flex-wrap gap-2 widget-tag">
    {smartphones.map((report,key) => (
      <Link to="#">
        <div className="badge font-size-14 p-4 py-2 bg-light text-dark">{report.description}</div>
      </Link>
    ))}
  </div>
</Row>

更新图片。使用 justify-content:space-between;（这就是我想要的。）

使用 .widget-tag{

解决方法

在 flexbox 中，我相信 justify-content:space-between; 可能会这样做。但是，由于您的 flex-items 的宽度不同，它会在两者之间设置不均匀的间隙。

另一种选择是您可以使用 CSS-Grid 并且您所有的子按钮都具有相同的宽度：

因此，在您的父元素（将成为您的父容器）上，您可以使用以下内容：

.widget-tag{
  display:grid;
  grid-template-columns: repeat(9,1fr);
}

您可以根据自己的要求进行游戏。