如何在Bootstrap的xs视口下让两个元素并排显示

问题描述 #

我是一名编程新手，代码可能有些杂乱，先致歉。目前开发页面时样式还没完善，想要实现的效果是：在Bootstrap的xs视口下，让名字（Tristen Roth）与navbar-toggler-icon显示在同一行。现在它们在xs视口中垂直分两行显示，导致切换图标右侧、名字两侧出现大量不美观的空白。理想状态是两者在xs视口同排，消除空白。我试过多种方法，部分方法虽实现了xs视口的效果，但破坏了更大尺寸视口的布局，达不到预期。

原始代码 #

CSS #

.row-content {
  padding-bottom: 10px;
  border-bottom: 1px ridge;
}

header {
  margin: 2%;
}

.navbar {
  margin: 0;
}

HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<header>
  <div class="container-fluid">
    <div class="row row-content">
      <div class="col-xs-3 col-md-4 col-xl-4" id="fullnavelement">
        <nav class="navbar navbar-expand-md navbar-light" id="navelement">
          <div class="container pl-0  d-inline-flex" id="navcontainer">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
              <div class="navbar-nav" id="navbar-links-custom">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                <a class="nav-link px-sm-2 px-md-3 px-lg-4 px-xl-5" href="about.html">About</a>
                <a class="nav-link" href="portfolio.html">Portfolio</a>
              </div>
            </div>
          </div>
        </nav>
      </div>

      <div class="col-xs-9 col-md-4 col-xl-4 align-self-center" id="nameobject">
        <h1 class="text-center text-nowrap">Tristen Roth</h1>
        <div class="d-none d-lg-block">
          <h5 class="text-center text-nowrap">Web Designer & Web Developer</h5>
        </div>
      </div>

      <div class="col-md-4 col-xl-4 mt-4 d-none d-md-block">
        <a class="btn btn-info text-nowrap" role="button">Contact Me</a>
      </div>
    </div>
  </div>
</header>

解决方案 #

针对Bootstrap 4的布局规则，通过调整响应式列宽和文本对齐方式即可实现需求，同时不破坏大视口布局：

修改后的代码 #

CSS（保留原有样式即可）

.row-content {
  padding-bottom: 10px;
  border-bottom: 1px ridge;
}

header {
  margin: 2%;
}

.navbar {
  margin: 0;
}

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<header>
  <div class="container-fluid">
    <div class="row row-content align-items-center">
      <!-- xs视口下自适应宽度，仅占按钮所需空间 -->
      <div class="col-auto col-md-4 col-xl-4" id="fullnavelement">
        <nav class="navbar navbar-expand-md navbar-light" id="navelement">
          <!-- 移除多余container类，避免padding干扰 -->
          <div class="pl-0 d-inline-flex" id="navcontainer">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
              <div class="navbar-nav" id="navbar-links-custom">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                <a class="nav-link px-sm-2 px-md-3 px-lg-4 px-xl-5" href="about.html">About</a>
                <a class="nav-link" href="portfolio.html">Portfolio</a>
              </div>
            </div>
          </div>
        </nav>
      </div>

      <!-- xs视口下占剩余空间，文本左对齐；大视口保持居中 -->
      <div class="col col-md-4 col-xl-4 align-self-center" id="nameobject">
        <h1 class="text-xs-left text-md-center text-nowrap">Tristen Roth</h1>
        <div class="d-none d-lg-block">
          <h5 class="text-center text-nowrap">Web Designer & Web Developer</h5>
        </div>
      </div>

      <div class="col-md-4 col-xl-4 mt-4 d-none d-md-block">
        <a class="btn btn-info text-nowrap" role="button">Contact Me</a>
      </div>
    </div>
  </div>
</header>

关键修改说明 #

1. 列宽适配：用col-auto替代col-xs-3，让导航列仅占据按钮所需宽度；col替代col-xs-9，占据剩余空间，确保xs视口下两者同排。
2. 响应式对齐：给名称的<h1>添加text-xs-left text-md-center类，实现xs视口左对齐（与按钮对齐），中等及以上视口保持居中。
3. 布局优化：给外层行添加align-items-center，确保按钮和名称垂直居中；移除导航内部的container类，避免额外padding导致错位。

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