将第一个列表项浮动到左侧，其余列表项浮动到右侧（使用 flexbox）

Question

我一直在尽最大努力在个人网页上解决我的 header 问题。目前，它看起来像这样：

如您所见，我有一个简单的段落，左边有 "ZH"。然后我在logo的右边直接多了三个list-items。我想要做的是让三个 list-items 浮动到右边，有点像这样：

这里是当前生成的HTML:

<ul class="nav">
        <a class="navbar-brand" href="http://localhost:8888/wordpress/">
            <p>ZH</p>
        </a>
        <li class="nav-item">
            <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/about/" role="button">About</a>
        </li>
        <li class="nav-item">
            <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/projects/" role="button">Projects</a>
        </li>
        <li class="nav-item">
            <a class="btn btn-lg nav-link" target="_blank" href="http://localhost:8888/wordpress/wp-content/themes/zachary_hughes_wordpress/assets/hughes_zachary_cv.pdf" role="button">Resume</a>
        </li>
</ul>

这是 ul.nav 的当前 CSS:

.nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

是否可以在不更改 html 标记的情况下执行此操作？任何帮助将不胜感激。

Answer 1

这是 flex 和 justify-content 的简单示例，请参考此站点 flexBox

<html>
    <head>
    <title>My Favorite Films</title>
 <style>
  #header{
   display: flex;
   justify-content: flex-end;
      background-color: pink;
  }
    
  h1{
   width: 125px;
   display: flex;
   background-color: antiquewhite;
  } 
 </style>
    </head>

    <body>
        <div id="container">
            <div id="header">
                <h1 class="home-page-header">My Favorite Films</h1>
            </div>
        </div>
    </body>
</html>

Answer 2

如果你包装 li 来创建两个 flex-items，你可以用 .nav 上的 justify-content: space-between 来完成它，然后将它们放置得尽可能远：

ul {
  list-style: none;
}

.nav {
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between; /* horizontal alignment / places first flex-item (child) far left and last far right, i.e. max. space between them */
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.flex-container {
  display: flex;
}

.flex-container > li {
  margin: 0 5px; /* adjust */
}

<div class="nav">
  <a class="navbar-brand" href="http://localhost:8888/wordpress/">
    <p>ZH</p>
  </a>
  <ul class="flex-container">
    <li class="nav-item">
      <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/about/" role="button">About</a>
    </li>
    <li class="nav-item">
      <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/projects/" role="button">Projects</a>
    </li>
    <li class="nav-item">
      <a class="btn btn-lg nav-link" target="_blank" href="http://localhost:8888/wordpress/wp-content/themes/zachary_hughes_wordpress/assets/hughes_zachary_cv.pdf" role="button">Resume</a>
    </li>
  </ul>
</div>

我已经使用 ul 元素来包装 li，并使用 div 来包装外部弹性容器。

Answer 3

这一切都可以 使用原生 Bootstrap class 单独完成，无需任何自定义 css。这就是Bootstrap 4.

的魅力

在这种特殊情况下，您只需要将 ml-auto class 添加到 ul。而已！

但是，您的代码的其他部分也存在问题。不使用 Bootstrap 4 提供的结构和元素会迫使您使用自定义 css。在我看来，这使得使用 Bootstrap 变得毫无意义。 Bootstrap 4 的美妙之处在于，你几乎可以做任何事情而无需触摸 css!

我已经重写了您的代码以提供一个干净优雅的解决方案，该解决方案仅使用 Bootstrap 4 classes 并且没有自定义 css。例如，class m-0 删除了品牌上不需要的边距。如果你确实想要那里的边距，只需将 0 更改为 1 或 2。对于仅水平边距，使用 mx-1 用于垂直边距 my-1 等

这是我承诺的优雅代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
       <a class="navbar-brand" href="http://localhost:8888/wordpress/">
           <p class="m-0">ZH</p>
       </a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
       </button>

       <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav ml-auto">
               <li class="nav-item">
                   <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/about/" role="button">About</a>
               </li>
               <li class="nav-item">
                   <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/projects/" role="button">Projects</a>
               </li>
               <li class="nav-item">
                   <a class="btn btn-lg nav-link" target="_blank" href="http://localhost:8888/wordpress/wp-content/themes/zachary_hughes_wordpress/assets/hughes_zachary_cv.pdf" role="button">Resume</a>
               </li>
           </ul>
       </div>
   </div>
</nav>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

将第一个列表项浮动到左侧，其余列表项浮动到右侧（使用 flexbox）

Floating First List Item to the Left and remaining list items to the right (using flexbox)

css

flexbox

display

bootstrap-4