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

Question

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

如您所见，我有一个简单的段落，左边有“ZH”。然后我在徽标的右侧还有另外三个列表项。我想要做的是让三个列表项向右浮动，有点像这样：

这是当前生成的 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

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

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 2

这一切都可以单独使用本机 Bootstrap 类完成，无需任何自定义 css。这就是 Bootstrap 4 的美妙之处。

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

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

我已经重写了您的代码，以提供一个干净而优雅的解决方案，该解决方案仅使用 Bootstrap 4 类并且没有自定义 css。例如，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>

Answer 3

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