在我开始之前，我想说我是一个初学者，所以我为我混乱的代码道歉。
我还在做这个，所以样式有点乱，但我试图让我的名字（Tristen Roth）和导航栏切换图标在xs视口中彼此相邻。目前，它将它们垂直放置在视口中的两个单独的行/线上。这在切换器图标的右侧和我的名字的两侧留下了许多不吸引人的空白。
理想情况下，我希望名称出现在xs视口中图标旁边的同一行上，这样就可以消除空白。
我已经尝试了一堆东西，有些工作，但他们搞乱了xs上的视口格式，所以它违背了目的。

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

header {
  margin: 2%;
}

.navbar {
  margin: 0;
}

<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>