时间戳

首页 > 解决方案 > 无法在 Bootstrap 中获得水平的“导航栏”

css - 无法在 Bootstrap 中获得水平的“导航栏”

问题描述

如何使这个引导程序“导航栏”变直，我尝试过使用不同的导航栏类，但无法让它变直，请帮帮我。此处给出的网页快照 网页快照

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <meta charset="utf-8">
    <title>>Bootstrap Practice</title>

  </head>
  <body>

<!-- Navbars -->
    <nav class="navbar navbar-default">

      <div class="container">
        <div class="navbar-header">
         <a href="https://www.youtube.com/user/ColdplayVEVO" class="navbar-brand">Coldplay</a>
       </div>

       <ul class="nav navbar-nav">
         <li> <a href="">Albums</a> </li>
         <li> <a href="#">Awards</a> </li>
         <li> <a href="#">Legacy</a> </li>
         <li> <a href="#">About</a> </li>
       </ul>

      </div>

     </nav>
  </body>
</html>

标签： cssbootstrap-4web-frontend

解决方案

navbar-nav 的默认行为是

flex-direction: column;

在html中设置一个类

<ul class="nav navbar-nav navigation-bar-row">
    <li> <a href="">Albums</a> </li>
    <li> <a href="#">Awards</a> </li>
    <li> <a href="#">Legacy</a> </li>
    <li> <a href="#">About</a> </li>
</ul>

然后在你的CSS中：

.navigation-bar-row {
    flex-direction: row;
}

如果您像我一样懒惰，请跳过上面的所有内容，然后执行以下操作：

<ul class="nav navbar-nav" style="flex-direction: row;">
    <li> <a href="">Albums</a> </li>
    <li> <a href="#">Awards</a> </li>
    <li> <a href="#">Legacy</a> </li>
    <li> <a href="#">About</a> </li>
</ul>

编辑：我下面的评论者说得对。最好的办法是将“d-flex fly-row”添加到 ul 类列表中。

推荐阅读