我无法让所有元素保持在同一条线上

Question

我无法将“关于我”“联系人”和“投资组合”全部保留在与我的名字部分相同的行上，即使他们在同一个div上。我不能使用定位因为这个引导程序。

我该如何解决这个问题？

<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid border" style="overflow:visible">
  <a href="#" class="nameBlock"> Vamsi Krishna Pappusetti</a>
  <ul class="nav row justify-content-end" id="navbar">
    <li class="nav-item">
      <a class="nav-link " href="#">About Me</a>
    </li>
    <li class="nav">
      <a class="nav-link" href="#">Contact</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Portfolio</a>
    </li>
  </ul>
</div>

Answer 1

以下是一个想法：

我将容器<div>变为nav row，p-0和m-0以清除填充和边距。
我做了＆＃34;名字＆＃34;链接到nav-link，因此它的填充与其他链接相同 我在ml-auto上设置<ul>，将其与右侧对齐。

＆＃13;

＆＃13;

<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="nav row border container-fluid p-0 m-0">
  <a href="#" class="nav-link">Vamsi Krishna Pappusetti</a>
  <ul class="nav ml-auto">
    <li>
      <a class="nav-link" href="#">About Me</a>
    </li>
    <li>
      <a class="nav-link" href="#">Contact</a>
    </li>
    <li>
      <a class="nav-link" href="#">Portfolio</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您必须将“nameBlock”和“navbar”组合到row div中，并使用Bootstrap 4中的ml-auto（Margin工具）将导航栏对齐结束。

代码：https://codepen.io/1412108/pen/BVLRRP

Bootstrap 4 Margin Utilities