我正在尝试创建一个多列无序列表，我可以相对于其标题居中。我已经尝试了一些我发现创建两列的方法，但是我无法成功地将它放在标题下方的中心，或者控制列之间的填充。然而，当我确实按照我的意愿看待美学时，通常使用左边填充，它会失去响应性并且看起来非常难看。这是创建多列的最佳方式，例如
我想要实现的目标：What I'd like
我目前拥有的图片：What I currently have
参见代码和样式表：
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700,800|Open+Sans:400,700,800');
html,
body {
height: 100%;
//width: 100%;
min-width: 300px;
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif !important;
}
.navbar {
font-family: 'Nunito', sans-serif !important;
}
h1,
h2,
h3,
h4,
{
font-family: 'Open Sans', sans-serif !important;
font-weight: 400
}
h5,
h6 {
font-family: 'Nunito', sans-serif !important;
font-weight: 800;
}
.inlineFontChange {
display: inline;
}
/*.progress{
flex-direction: row;
}
*/
.ulCenter {
display: flex;
justify-content: center;
}
p {
text-align: justify;
color: #3B424C;
}
#profilePic {
margin-left: 20px;
margin-top: 28px;
margin-bottom: 10px;
float: right;
}
@media only screen and (max-width: 480px) {
#profilePic {
float: none;
margin: 0 auto;
justify-content: center;
display: block;
}
}
// .navbar{
// background-color: #3B424C; //This is the color of the actual background; navbar-dark-color is the link color!
//background:none !important;
// width: 100%;
// }
.jarallax {
position: relative;
z-index: 0;
}
.jarallax>.jarallax-img {
position: absolute;
object-fit: cover;
/* support for plugin https://github.com/bfred-it/object-fit-images */
font-family: 'object-fit: cover;';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/* Help from: https://free.nkdev.info/jarallax/*/
.overlay {
display: table;
width: 100%;
height: 75vh;
background-color: rgba(190, 190, 190, 0.6);
}
@media only screen and (max-height: 740px) {
.overlay {
height: 100vh;
}
}
.overlay-cell {
position: absolute;
left: 0;
//top: 35%;
top: 34%;
width: 100%;
text-align: center;
}
.heroSection {
height: 100vh; //Controls the height of the Hero
}
.subSection {
height: 300px; //Controls the height of the subsection jarallax
margin: 0;
}
#baseNav {
//font-family: 'Yantramanav', sans-serif;
//font-weight: 700;
//font-size: 20px;
list-style-type: none;
margin: 0;
padding: 0;
//overflow: hidden;
//background-color: #3b424c;
position: fixed;
top: 0;
width: 100%;
transition: all 200ms ease-in-out;
}
#baseNav.hide {
transform: translateY(-100%);
}
.navbar {
top: 0;
margin: 0;
position: fixed; //THIS IS KEY! IN ORDER TO GET NAV OVER PICTURE
width: 100%
}
.navbar-nav .nav-link {
font-size: 1.2rem;
font-weight: bold;
@media (max-width: 34em) {
font-weight:normal;
}
.navbar-nav .nav-item {
padding: 0 1rem;
@media(max-width: 34 em) {
padding: 0;
}
}
}
.navbar-toggler {
cursor: pointer;
}
// This adjusts the Main Menu and Dropdown (submenu) colors
$bgMain: rgba(59,
66,
76,
0); // This color '0' at the end is for transparency for navbar hiding
$bgDropdown: rgba(59,
66,
76,
1);
$bgHighlight: hsl(184,
85%,
43%);
$colDefault: #ffffff;
$colHighlight: #95ce33;
$dropDown: true;
.navbar {
background-color: $bgMain;
.navbar-brand {
color: $colDefault;
&:hover,
&:focus {
color: $colHighlight;
}
}
.navbar-text {
color: $colDefault;
}
.navbar-nav {
.nav-link {
color: $colDefault;
border-radius: .25rem;
margin: 0 0.25em;
&:not(.disabled) {
&:hover,
&:focus {
color: $colHighlight;
}
}
}
@if ($dropDown) {
.dropdown-menu {
background-color: $bgDropdown;
border-color: $bgHighlight;
.dropdown-item {
color: $colDefault;
&:hover,
&:focus,
&.active {
color: $colHighlight;
background-color: $bgHighlight;
}
}
.dropdown-divider {
border-top-color: $bgHighlight;
}
}
}
.nav-item.active,
.nav-item.show {
.nav-link,
.nav-link:hover,
.nav-link:focus {
color: $colHighlight;
background-color: $bgHighlight;
}
}
}
.navbar-toggle {
border-color: $bgHighlight;
&:hover,
&:focus {
background-color: $bgHighlight;
}
.navbar-toggler-icon {
color: $colDefault;
}
}
.navbar-collapse,
.navbar-form {
border-color: $colDefault;
}
.navbar-link {
color: $colDefault;
&:hover {
color: $colHighlight;
}
}
}
@media (max-width: 575px) {
.navbar-expand-sm .navbar-nav .show .dropdown-menu {
.dropdown-item {
color: $colDefault;
&:hover,
&:focus {
color: $colHighlight;
}
}
.dropdown-item.active {
color: $colHighlight;
background-color: $bgHighlight;
}
}
}
@media (max-width: 767px) {
.navbar-expand-md .navbar-nav .show .dropdown-menu {
.dropdown-item {
color: $colDefault;
&:hover,
&:focus {
color: $colHighlight;
}
}
.dropdown-item.active {
color: $colHighlight;
background-color: $bgHighlight;
}
}
}
@media (max-width: 991px) {
.navbar-expand-lg .navbar-nav .show .dropdown-menu {
.dropdown-item {
color: $colDefault;
&:hover,
&:focus {
color: $colHighlight;
}
}
.dropdown-item.active {
color: $colHighlight;
background-color: $bgHighlight;
}
}
}
@media (max-width: 1199px) {
.navbar-expand-xl .navbar-nav .show .dropdown-menu {
.dropdown-item {
color: $colDefault;
&:hover,
&:focus {
color: $colHighlight;
}
}
.dropdown-item.active {
color: $colHighlight;
background-color: $bgHighlight;
}
}
}
.navbar-expand .navbar-nav .show .dropdown-menu {
.dropdown-item {
color: $colDefault;
&:hover,
&:focus {
color: $colHighlight;
}
}
.dropdown-item.active {
color: $colHighlight;
background-color: $bgHighlight;
}
}
#about {
padding-top: 3em;
padding-bottom: 3em;
}
#mainOverlay {
margin: 0;
}
.logoImages {
margin: auto;
display: block;
}
//This is for the FA Icon alignment in the Skills list
dl {
margin-left: 40px
}
dt {
font-size: 1.3em;
position: relative;
}
dt:not(:first-of-type) {
margin-top: 2em
}
dt:before {
content: "";
font-family: FontAwesome;
left: -40px;
position: absolute;
top: 5px;
}
dt.achievement:before {
content: "\f091";
//These two nested lines control the FA Icon animation! because of the fact i am using a ::before element, I cannot use the native fa spinning classes explicitly in the html
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
dt.academic:before {
content: "\f19d";
}
dd {
margin-left: 0
}
dd.description {
font-size: 1 em;
}
/////
.Test {
columns: 2;
-webkit-columns: 2;
//padding-right: em;
//float:center;
-moz-columns: 2;
justify-content: center;
ul {
margin-left: 40px
}
li {
font-size: 1.3em;
position: relative;
}
li:not(:first-of-type) {
margin-top: 2em
}
li:before {
content: "";
font-family: FontAwesome;
left: -40px;
position: absolute;
top: 5px;
}
li.achievement:before {
content: "\f091";
//These two nested lines control the FA Icon animation! because of the fact i am using a ::before element, I cannot use the native fa spinning classes explicitly in the html
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.puzzle:before {
content: "\f12e";
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.wrench:before {
content: "\f0ad";
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.academic:before {
content: "\f19d";
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.plane:before {
content: "\f072";
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.car:before {
content: "\f1b9";
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.volunteer:before {
content: "\f0c0";
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.camera:before {
content: "\f030";
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.honors {
float: right;
}<div data-jarallax data-speed="0.6" class="jarallax">
<img class="jarallax-img" src="assets/skills.jpg" alt="">
<div class="overlay subSection container-fluid">
<div class="row justify-content-center">
<div class="overlay-cell clearfix">
<div class="col-sm-12">
<h1 class="display-2 ">Skills</h1>
</div>
</div>
</div>
</div>
</div>
<section id="about">
<h5 class="text-center pb-3">Ready to tackle any challenge. Proven by performance.</h5>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-5">
<!--- Instruments -->
<h4 class="text-center pt-3">Instruments</h4>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">CombiFlash® Rf+ </div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Mass Spectrometer (GC-MS, ESI-MS, APCI-MS)</div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">NMR</div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">UV-Vis Spectrophotometer </div>
</div>
<!--- Languages -->
<h4 class="text-center pt-5">Languages</h4>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">English </div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Español</div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Français</div>
</div>
<!--- Software -->
<h4 class="text-center pt-5">Software</h4>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">ChemDraw </div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Spartan ’16</div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Bruker® TopSpin</div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Adobe® Suite (Illustrator, Photoshop, and etc..)</div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Wolfram® Mathematica</div>
</div>
</div>
<div class="col-md-5 honors offset-md-2">
<h4 class="text-center pt-3">Honors and Awards</h4>
<dl>
<dt class="achievement">Boy Scouts of America Eagle Scout Rank</dt>
<dd class="description">The Highest Rank in Scouting</dd>
<dd>April 2014</dd>
<dt class="academic">Principal's Award of Excellence </dt>
<dd class="description">Recognized for Scientific Research</dd>
<dd>June 2013 & 2014</dd>
<dt class="academic fa-spinner">Presidents Award for Educational Excellence</dt>
<dd class="description">U.S. Department of Education | President Barack H. Obama</dd>
</dl>
<h4 class="text-center pt-3">Hobbies and Interests</h4>
<ul class="Test">
<li class="pb-3 puzzle">Puzzles</li>
<li class="pb-3 wrench">Handy Work</li>
<li class="pb-3 plane ">Travel</li>
<li class="pb-3 car">Automobiles</li>
<li class="pb-3 volunteer">Volunteering</li>
<li class="pb-3 camera">Photography</li>
</ul>
</div>
</div>
</div>
</section>
更新的HTML：
<section id="about">
<h5 class="text-center pb-3">Ready to tackle any challenge. Proven by
performance.</h5>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-5">
<!--- Instruments -->
<h4 class="text-center pt-3">Instruments</h4>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">CombiFlash® Rf+ </div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Mass Spectrometer (GC-MS, ESI-MS, APCI-MS)</div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">NMR</div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">UV-Vis Spectrophotometer </div>
</div>
<!--- Languages -->
<h4 class="text-center pt-5">Languages</h4>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">English </div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Español</div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Français</div>
</div>
<!--- Software -->
<h4 class="text-center pt-5">Software</h4>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">ChemDraw </div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Spartan ’16</div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Bruker® TopSpin</div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Adobe® Suite (Illustrator, Photoshop, and etc..)</div>
</div>
<div class="progress mb-3" style="height: 35px">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Wolfram® Mathematica</div>
</div>
</div>
<div class="col-md-5 honors offset-md-2">
<h4 class="text-center pt-3">Honors and Awards</h4>
<dl>
<dt class="achievement">Boy Scouts of America Eagle Scout Rank</dt>
<dd class="description">The Highest Rank in Scouting</dd>
<dd>April 2014</dd>
<dt class="academic" >Principal's Award of Excellence </dt>
<dd class="description">Recognized for Scientific Research</dd>
<dd>June 2013 & 2014</dd>
<dt class="academic fa-spinner" >Presidents Award for Educational Excellence</dt>
<dd class="description">U.S. Department of Education | President Barack H. Obama</dd>
</dl>
<h4 class="text-center pt-5">Hobbies and Interests</h4>
<div class="container">
<div class="row">
<div class="col" style="column-count: 2; column-gap: 50px;">
<ul class="Test list-unstyled">
<li class= "pb-2 pt-2 puzzle">Puzzles</li>
<li class= "pb-2 wrench">Handy Work</li>
<li class= "pb-2 plane">Travel</li>
<li class= "pb-2 car">Automobiles</li>
<li class= "pb-2 volunteer">Volunteering</li>
<li class= "pb-2 camera">Photography</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
更新的SCSS：
.honors{
float: right;
}
li.puzzle::before {
font-family: "FontAwesome";
content: "\f12e";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.wrench::before {
font-family: "FontAwesome";
content: "\f0ad";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.plane::before {
font-family: "FontAwesome";
content: "\f072";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.car::before {
font-family: "FontAwesome";
content: "\f1b9";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.volunteer::before {
font-family: "FontAwesome";
content: "\f0c0";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.camera::before {
font-family: "FontAwesome";
content: "\f030";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
dl {margin-left: 40px}
.ulCenter{
display: flex;
justify-content: center;
}
dt {font-size: 1.3em;position:relative;}
dt:not(:first-of-type) {margin-top: 2em}
dt:before {
content: "";
font-family: FontAwesome;
left: -40px;
position:absolute;
top: 5px;
}
dt.achievement:before {
content: "\f091";
//These two nested lines control the FA Icon animation! because of the
fact i am using a ::before element, I cannot use the native fa spinning
classes explicitly in the html
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
dt.academic:before {
content: "\f19d";
}
dd {margin-left: 0}
dd.description {font-size: 1 em;}
答案 0 :(得分：1)
将无序列表放入其自己的行 - 列对（嵌套）并将style="column-count: 2"添加到其中。完成！
换句话说，用以下代码替换您的列表：
<div class="row">
<div class="col" style="column-count: 2">
<ul class="Test">
<li class= "pb-3 puzzle">Puzzles</li>
<li class= "pb-3 wrench">Handy Work</li>
<li class= "pb-3 plane ">Travel</li>
<li class= "pb-3 car">Automobiles</li>
<li class= "pb-3 volunteer">Volunteering</li>
<li class= "pb-3 camera">Photography</li>
</ul>
</div>
</div>
css规则column-count: 2会自动将内容拆分为2个css列。
为了证明这确实有效，这里有一个可行的解决方案，在这种情况下所有东西都包裹在容器中（你不想在你的情况下使用容器，因为你已经有了容器）：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
li.puzzle::before {
font-family: "FontAwesome";
content: "\f12e";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.wrench::before {
font-family: "FontAwesome";
content: "\f0ad";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.plane::before {
font-family: "FontAwesome";
content: "\f072";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.car::before {
font-family: "FontAwesome";
content: "\f1b9";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.volunteer::before {
font-family: "FontAwesome";
content: "\f0c0";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.camera::before {
font-family: "FontAwesome";
content: "\f030";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
</style>
<div class="container">
<div class="row">
<div class="col" style="column-count: 2; column-gap: 50px;">
<ul class="Test list-unstyled">
<li class= "pb-2 pt-2 puzzle">Puzzles</li>
<li class= "pb-2 wrench">Handy Work</li>
<li class= "pb-2 plane">Travel</li>
<li class= "pb-2 car">Automobiles</li>
<li class= "pb-2 volunteer">Volunteering</li>
<li class= "pb-2 camera">Photography</li>
</ul>
</div>
</div>
</div>
请注意在list-unstyled上使用ul类。这取消了要点。
要调整列表项左侧的对齐方式，请将pl-2或pl-3等类添加到li元素中（或者，您可以添加margin-left: 8px;在各个图标的自定义css中）。要调整图标与术语之间的距离，请增加或减少各个图标的自定义CSS中margin-right: 8px;的值。要调整第二列的显示位置，请更改column-gap: 50px;的值。