Bootstrap制作的几个站点分享

:root {
  --custom-color-list-page-number: #FF6F0F; /* 定义自定义颜色变量 */
} 

2.文章列表的分页样式
.paging_list {
list-style: none;
display: flex;
justify-content: center;
margin-top: 20px;
padding: 0;
}
.paging_list li {
margin: 0 5px;
}
.paging_list a {
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f6ff; /* 小正方形背景颜色 */
width: 40px;
height: 40px;
border-radius: 3px;
text-align: center;
border-radius:17px;
text-decoration: none;
color: black;

font-size: 14px;
}
.paging_list a:hover {
background-color: var(--custom-color-list-page-number); 
}
.paging_list li.on a {
background-color: var(--custom-color-list-page-number);  /* 选中状态的背景颜色 */
}

3.在手机端一行只显示一个项目
/* 媒体查询 - 手机端样式 */
@media screen and (max-width: 767px) {
    .zdy_list_one {
        width: calc(100% - 20px); 
    }
}

4.自定义标题的颜色和居中
.n-title{
text-align: center;
color: #000;
} 

5.最好用的调整模块代码
.zdy_s_gun_app_item {
  flex: 0 0 calc(25% - 20px); /* Adjust the width as needed */
  display: flex;
  flex-direction: column; /* Stack items vertically */
  justify-content: center;
  align-items: center;
  background-color: #f0f6ff; /* 小正方形背景颜色 */
  text-align: center;
  padding: 20px;
  margin-right: 20px; /* Adjust the margin as needed */
  box-sizing: border-box; /* Include padding in element's total width and height */
}