实现Logo与导航栏链接同行显示及移动端自适应布局

看起来你是用Bootstrap栅格系统做头部布局的，现在Logo和导航分两行，大概率是导航部分的列布局没和Logo的列凑够12格，或者结构没搭对。我给你调整下代码，完美实现你要的效果：

修正后的HTML结构 #

<!-- header Area Start-->
<div class="header-area">
  <div class="container">
    <div class="row align-items-center"> <!-- 加这个类让Logo和导航垂直居中对齐 -->
      <!-- Logo列：桌面端占2格，移动端占满整行 -->
      <div class="col-lg-2 col-12">
        <div class="logo">
          <a href="index-2.html">
            <img src="assets/img/logo.png" alt="网站Logo">
          </a>
        </div>
      </div>
      <!-- 导航列：桌面端占10格，移动端占满整行 -->
      <div class="col-lg-10 col-12">
        <!-- 这里放你的导航链接，示例用ul列表结构 -->
        <nav class="main-nav">
          <ul class="nav-list">
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</div>
<!-- header Area End-->

配套CSS样式（让导航横向排列） #

如果你的导航现在是垂直排列的，加这段CSS让桌面端导航横向靠右：

.main-nav .nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end; /* 导航链接靠右对齐 */
  gap: 2rem; /* 控制链接之间的间距 */
}

/* 移动端可根据需求调整导航样式，这里默认改为垂直排列 */
@media (max-width: 991px) {
  .main-nav .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

关键调整点说明 #

• 给.row添加align-items-center，确保Logo和导航在垂直方向上居中对齐，视觉更协调。
• Logo列用col-lg-2 col-12：桌面端占2/12宽度，移动端自动占满整行，实现单独展示。
• 导航列用col-lg-10 col-12：桌面端占10/12宽度，和Logo的2格凑满12列，自然在同一行；移动端占满整行，在Logo下方展示。
• 用flex布局实现导航横向排列，桌面端靠右，移动端适配小屏幕改成垂直排列（你也可以根据需求改成横向）。

这样调整后，桌面端Logo和导航就会在同一行，缩小屏幕到移动端尺寸时，Logo自动单独占一行，导航在下方展示啦。

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