Question

我开始学习Bootstrap4，我有下面的html代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <style>
    html, body{
        height : 100%;
    }
    #contentwrapper{
    width: 20%;
    height: 100%;
    padding-left: 10px;
}
    </style>
</head>

<body>
    <div id="contentwrapper" class="h-100 row align-items-center">
    <nav class="navbar bg-dark navbar-dark" style="height: 100%;">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Item 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Item 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Item 3</a>
            </li>
        </ul>
    </nav>
    </div>

</body>

</html>

我正在尝试将项1，项2和项3 nav-item设置为垂直顶部对齐，但它位于垂直中心对齐

我能做到吗？

Answer 1

只需将align-items-start（https://getbootstrap.com/docs/4.3/utilities/flex/#align-items）添加到导航栏，因为它是一个flexbox容器：

html,
body {
  height: 100%;
}

#contentwrapper {
  width: 20%;
  padding-left: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="contentwrapper" class="h-100 row ">
  <nav class="navbar bg-dark navbar-dark h-100 align-items-start">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Item 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item 3</a>
      </li>
    </ul>
  </nav>
</div>

Answer 2

将此添加到您的

将导航栏中的内容与顶部对齐

2 个答案: