如何解决Bootstrap Flex 和 JavaScript
你好!因此,我打算通过对齐内容(即 style={{textAlign:"justify"}}
.
因此,如果需要,项目将通过扩展自身来占据 Row
的整个宽度。
这是我的对象(忽略相同的 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);
}
您可以根据自己的要求进行游戏。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。