如何实现UIKit响应式导航栏？解决元素重叠与换行问题

我正尝试使用UIKit创建包含左、中、右元素的响应式导航栏。在大屏幕上元素显示如下：

调整浏览器窗口大小时，元素会相互重叠而非换行至新行：

我的目标是在小屏幕上让中间元素移至顶部行，左右元素显示在下方，请问该如何实现导航栏的响应式效果？

解决方案 #

利用UIKit的响应式flex布局类和自定义媒体查询，就能实现需求的布局切换：

修改后的完整代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.21.8/dist/css/uikit.min.css">
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.23/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.23/dist/js/uikit-icons.min.js"></script>

<nav uk-navbar class="uk-flex-wrap uk-flex-middle">
  <!-- 中间元素：小屏幕居顶，大屏幕居中 -->
  <div class="uk-navbar-center uk-padding-large uk-background-secondary uk-order-first uk-order-medium-2">
    <span class="uk-width-large"></span>
  </div>
  <!-- 左侧元素：大屏幕居左，小屏幕居下左侧 -->
  <div class="uk-navbar-left uk-padding-large uk-background-primary uk-order-medium-first">
    <span class="uk-width-large"></span>
  </div>
  <!-- 右侧元素：大屏幕居右，小屏幕居下右侧 -->
  <div class="uk-navbar-right uk-padding-large uk-background-primary uk-order-medium-last">
    <span class="uk-width-large"></span>
  </div>
</nav>

.uk-navbar-center {
  opacity: 0.7;
}

/* 小屏幕适配（768px以下） */
@media (max-width: 767px) {
  .uk-navbar-left, .uk-navbar-right {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
  }
  .uk-navbar-center {
    width: 100%;
    margin-bottom: 10px;
  }
}

关键调整说明 #

1. 元素顺序控制：使用UIKit的uk-order-*响应式类，uk-order-first让中间元素在小屏幕时排在最前，uk-order-medium-2让它在中等及以上屏幕回到中间位置；左侧、右侧元素分别用uk-order-medium-first和uk-order-medium-last维持大屏幕的左、右布局。
2. 换行与居中：保留uk-flex-wrap确保空间不足时元素自动换行，添加uk-flex-middle让导航栏内元素垂直居中。
3. 小屏幕样式优化：通过媒体查询调整小屏幕下的宽度、边距和对齐方式，让左右元素占满整行并居中显示，中间元素底部留间距避免拥挤。

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