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

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>

标签： htmlcsstwitter-bootstrap

Answer 1

您必须将“nameBlock”和“navbar”组合成一个rowdiv 并ml-auto在 Bootstrap 4 中使用（边距实用程序）将导航栏与结尾对齐。

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

Bootstrap 4 保证金工具