英文:
ReactJS Bootstrap 5.2: Space Column Elements in NavBar?
问题
将这些项目均匀分布在整个页脚而不是聚集在中心，最好的方法是使用CSS来设置列的间距。您可以为每个列添加margin或padding属性，以使它们在整个页脚中均匀分布。以下是一个示例代码片段，用于设置列之间的间距：
/* 在您的CSS文件中添加以下样式 */
.column {
margin: 0 10px; /* 设置列之间的水平间距，根据需要进行调整 */
}
然后，将这个column类应用到每个<div className="col">元素上，以实现列的均匀分布。这样，您的项目将在页脚中更均匀地分布。
英文:
I have link items on a footer navbar in a row of columns.
import React from "react";
import {Link} from "react-router-dom";
export const NavBarBrandBottom = () => {
return (
<div className="container-fluid" style={{
"justify-content": 'center'
}}>
<div classname="row">
<ul className="navbar-nav mb-lg-0" style={{
"font-size": '12px'
}}>
<div className="col">
<li className="nav-item me-2">
<Link to={"/add"} className="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white"
className="bi bi-plus-square-fill ms-1" viewBox="0 0 16 16">
<path
d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
</svg>
<br/>
<span>Add</span>
</Link>
</li>
</div>
<div className="col">
<li className="nav-item text-center me-2">
<Link to={"/tasks"} className="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white"
className="bi bi-card-list ms-1" viewBox="0 0 16 16">
<path
d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
<path
d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
</svg>
<br/>
<span>Items</span>
</Link>
</li>
</div>
<div className="col">
<li className="nav-item text-center">
<Link to={"/family"} className="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white"
className="bi bi-people-fill ms-1" viewBox="0 0 16 16">
<path
d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/>
</svg>
<br/>
<span>Groups</span>
</Link>
</li>
</div>
</ul>
</div>
</div>
);
};
When being displayed, these items are all very close to each other - but I want them spaced out evenly over the entire footer, not clustered in the center. What is the best way of doing this?
答案1
得分: 1
你可以使用Bootstrap的flex实用类：
import React from "react";
import { Link } from "react-router-dom";
export const NavBarBrandBottom = () => {
return (
<div className="container-fluid">
<div className="row">
<ul
className="navbar-nav mb-lg-0 d-flex justify-content-around w-100"
style={{
"font-size": "12px",
}}
>
<div className="col-auto">
{/* 添加内容 */}
</div>
<div className="col-auto">
{/* 项目内容 */}
</div>
<div className="col-auto">
{/* 组内容 */}
</div>
</ul>
</div>
</div>
);
};
不包括代码部分的翻译。
英文:
You can use Bootstrap's flex utility classes:
import React from "react";
import { Link } from "react-router-dom";
export const NavBarBrandBottom = () => {
return (
<div className="container-fluid">
<div className="row">
<ul
className="navbar-nav mb-lg-0 d-flex justify-content-around w-100"
style={{
"font-size": "12px",
}}
>
<div className="col-auto">
{/* Add content */}
</div>
<div className="col-auto">
{/* Items content */}
</div>
<div className="col-auto">
{/* Groups content */}
</div>
</ul>
</div>
</div>
);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论