如何调整不同屏幕下块大小及实现Bootstrap Footer区块响应式布局

嘿，我来帮你搞定这两个Bootstrap布局问题！

因为你用的是Bootstrap，最省心的方式就是利用它移动优先的栅格系统：

• 给目标区块添加响应式列类：
  • 大屏幕（md及以上，默认≥768px）下占50%宽度：col-md-6
  • 小屏幕下自动占100%宽度：Bootstrap栅格默认在小于md的屏幕上，列会自动变为100%宽度，无需额外设置；如果要精准控制最小屏幕，可再加col-12，完整类名就是col-12 col-md-6
• 要是你用的是自定义CSS而非Bootstrap栅格，就用媒体查询实现：

.your-block-class {
  width: 100%; /* 小屏幕默认100% */
}

/* 匹配Bootstrap的md断点，按需调整数值 */
@media (min-width: 768px) {
  .your-block-class {
    width: 50%;
  }
}

首先，你的两个区块已经用了col-md-6，只要把它们放在Bootstrap的row容器里，在小屏幕（小于768px）下就会自动上下堆叠，而且navbarfooter-linksleft会自然排在上方，navbarfooter-linksright在下方——这是Bootstrap移动优先栅格的默认行为，不用改结构。

接下来处理边框需求，分两种场景：

1. 两个区块之间添加分隔边框 #

有两种实现方式：

• 用Bootstrap内置响应式类：给navbarfooter-linksright加border-top border-md-0，这样只有小屏幕显示顶部边框，大屏幕下自动隐藏（避免水平排列时出现多余边框）
• 自定义CSS：

/* 匹配Bootstrap的md断点临界值 */
@media (max-width: 767.98px) {
  .navbarfooter-linksright {
    border-top: 1px solid #ddd; /* 替换成你需要的边框样式 */
    padding-top: 15px; /* 可选，增加间距更美观 */
  }
}

2. 每个区块内部元素之间添加边框 #

结合你现有的.navbarfooter-links { display: flex; ... }代码，针对不同屏幕调整样式：

.navbarfooter-links {
  display: flex;
  margin: 15px 0;
  gap: 10px; /* 可选，增加元素间距 */
}

/* 大屏幕下：水平排列，元素间加右侧边框 */
.navbarfooter-links > * {
  border-right: 1px solid #ddd;
  padding-right: 10px;
}

.navbarfooter-links > *:last-child {
  border-right: none; /* 最后一个元素去掉右侧边框 */
  padding-right: 0;
}

/* 小屏幕下：改为垂直排列，元素间加底部边框 */
@media (max-width: 767.98px) {
  .navbarfooter-links {
    flex-direction: column;
  }

  .navbarfooter-links > * {
    border-right: none;
    border-bottom: 1px solid #ddd;
    padding-right: 0;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  .navbarfooter-links > *:last-child {
    border-bottom: none; /* 最后一个元素去掉底部边框 */
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

内容的提问来源于stack exchange，提问作者Randall