【问题标题】：how to make some child items 50% wide and side by side in flex-direction column container?如何在 flex-direction 列容器中使一些子项目 50% 宽并并排？
【发布时间】：2019-07-19 03:49:00
【问题描述】：

我使用引导程序 4 .navbar-nav。

这是 codeply https://www.codeply.com/go/Zib61kYY2M 的完整现场演示

当.navbar-nav 在设置断点处进入移动折叠模式时。

应用下面的这些样式，并创建一个漂亮的导航栏按钮堆叠列表。

display: flex;
flex-direction: column;

但我需要控制最后两个孩子.nav-item 的宽度。而且我需要这些项目并排出现。

这可以通过 flex 实现吗？

这是当前导航的样子...

这就是我希望最后两项看起来的样子...

我添加了 2 个类，最后 2 个项目称为 .nav-account，所以我只需要像这样设置一些 css...

.nav-account {
   width: 50%;
   ...
}

因此，将最后 2 个项目设为 50% 宽并彼此相邻。

下面和这里的完整代码https://www.codeply.com/go/Zib61kYY2M

<ul class="navbar-nav flex-lg-grow-1 text-center text-lg-right">
    <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">FAQ's</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
    </li>
    <li class="nav-item nav-account ml-lg-auto">
        <a class="nav-link" href="https://dev.thesweetpeople.co/wp-login.php?redirect_to=https%3A%2F%2Fdev.thesweetpeople.co%2Fprofile">Log in</a>
    </li>

    <li class="nav-item nav-account">
        <a class="nav-link" href="/register"><i class="fas fa-fw fa-user-plus color-sweets"></i> Register</a>
    </li>
</ul>

【问题讨论】：

标签： html css twitter-bootstrap flexbox bootstrap-4

【解决方案1】：

您可以尝试以下方法：

将flex-wrap flex-row 类添加到您的ul（这会将flex-direction 始终设置为row 并设置flex-wrap）
将 col-12 col-lg-auto 添加到您的 nav-items 中，最后两个除外（在移动视图中设置为 100% flex-basis）
将col-6 col-lg-auto 添加到最后两个nav-items（在移动视图中为最后两个项目设置50% flex-basis）

请看下面的演示：

.navbar {
  opacity: 1;
  transition: opacity 0.5s ease;
}
.navbar-hide {
  pointer-events: none;
  opacity: 0;
}
.nav-item {
  border: 1px solid red;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Flex direction</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav flex-lg-grow-1 text-center text-lg-right flex-wrap flex-row">
      <li class="nav-item col-12 col-lg-auto active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">Products</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">FAQ's</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item nav-account ml-lg-auto col-6 col-lg-auto">
        <a class="nav-link" href="https://dev.thesweetpeople.co/wp-login.php?redirect_to=https%3A%2F%2Fdev.thesweetpeople.co%2Fprofile">Log in</a>
      </li>
      <li class="nav-item nav-account col-6 col-lg-auto">
        <a class="nav-link" href="/register"><i class="fas fa-fw fa-user-plus color-sweets"></i> Register</a>
      </li>
    </ul>
  </div>
</nav>
<main role="main" class="container">
  <div class="jumbotron">
    <h1>Flex direction</h1>
    <p class="lead">My question, in mobile mode, is it possible to make the the <strong>register</strong> and <strong>login</strong> buttons 50% wide and side by side using flex?</p>
    <a class="btn btn-lg btn-primary" href="https://getbootstrap.com/docs/4.3/utilities/flex/" role="button">View flex docs »</a>
  </div>
</main>

【讨论】：

谢谢你这似乎工作，不像我希望的那么简单，但它的工作非常好。不错！

【解决方案2】：

一个解决方案可以将最后两个 <li> 项目包装在下一个元素中：

<div class="ml-lg-auto d-inline-flex">
  ...
</div>

然后将w-50 类添加到它们。

示例：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">

  <a class="navbar-brand" href="#">Flex direction</a>
  
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav flex-lg-grow-1 text-center text-lg-right">
      <li class="nav-item active border">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">Products</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">FAQ's</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">Contact</a>
      </li>

      <div class="ml-lg-auto d-inline-flex">
        <li class="nav-item nav-account w-50 border">
          <a class="nav-link" href="#">Log in</a>
        </li>
        <li class="nav-item nav-account w-50 border">
          <a class="nav-link" href="/register">
            <i class="fas fa-fw fa-user-plus color-sweets"></i>
            Register
          </a>
        </li>
      </div>
    </ul>

  </div>
</nav>

这是另一个版本，它使用嵌套的 <li> 和 <ul> 项目来避免使用评论中提到的无效标记：

替代版本：

.custom-ul {
    list-style:none;
    padding: 0px;
    margin: 0px;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">

  <a class="navbar-brand" href="#">Flex direction</a>
  
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav flex-lg-grow-1 text-center text-lg-right">
      <li class="nav-item active border">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">Products</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">FAQ's</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">Contact</a>
      </li>

      <li class="ml-lg-auto">
        <ul class="custom-ul d-flex">
          <li class="nav-item nav-account w-50 border">
            <a class="nav-link" href="#">Log in</a>
          </li>
          <li class="nav-item nav-account w-50 border">
            <a class="nav-link" href="/register">
              <i class="fas fa-fw fa-user-plus color-sweets"></i>
              Register
            </a>
          </li>
        </ul>
      </li>
    </ul>

  </div>
</nav>

【讨论】：

ul 应该只有 li 作为孩子......但是，它的工作正常
起初我认为这是成功的答案，但我不能让自己使用无效标记。感谢您的答案，并了解非列表内容。 +1 内联技巧。
@joshmoto 我已经包含了基于两个评论的替代版本，因此没有无效标记。以防万一这对某人有用。无论如何，感谢您的努力！