Question

我正在尝试使用Bootstrap4中的代码使我的导航响应。我希望它们一直是水平的所以我必须使用类：flex-column flex-row flex-fill text-center而不是flex-column flex-xs-row flex-xs-fill text-xs-center起因我是使用BS4，但无论如何都无法正常工作。（顺便说一下，请向我解释这些课程中每个课程在导航中扮演什么角色，我的意思是如果我删除其中一个会影响任何东西吗？）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Six+Caps|Source+Code+Pro" rel="stylesheet">
<nav class="nav nav-fill nav-justified flex-column flex-row" role="navigation">
  <a href="#" class="nav-item nav-link active flex-fill text-center">Home</a>
  <a href="#" class="nav-item nav-link flex-fill text-center">Lorem</a>
  <a href="#" class="nav-item nav-link flex-fill text-center">Ipsum</a>
  <a href="#" class="nav-item nav-link flex-fill text-center">Dolor</a>
</nav>
<div class="text-center" id="underc">
  <h1>UNDER CONSTRUCTION</h1>
</div>

Answer 1

为什么你需要那个伙伴中的弹性位？

请务必将样式表链接放在头部，我不确定您是否从代码段中执行此操作。

以下方式将链接放入列表中。如果你想成为完全有效的html，那么你应该将列表项放在

标记内。

以下代码应具有响应性且始终水平。

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
    <link href="https://fonts.googleapis.com/css?family=Six+Caps|Source+Code+Pro" rel="stylesheet">
</head>

<body>
    <nav class="nav nav-fill nav-justified" role="navigation">
        <li class="nav-item nav-link"><a href="#" class="active text-center">Home</a></li>
        <li class="nav-item nav-link"><a href="#" class=" text-center">Lorem</a></li>
        <li class="nav-item nav-link"><a href="#" class="text-center">Ipsum</a></li>
        <li class="nav-item nav-link"><a href="#" class="text-center">Dolor</a></li>
    </nav>
    <div class="text-center" id="underc">
        <h1>UNDER CONSTRUCTION</h1>
    </div>
</body>

</html>

希望它有所帮助;）

如何让导航始终保持水平？（Bootstrap 4）

1 个答案:

如何让导航始终保持水平？ （Bootstrap 4）

1 个答案:

如何让导航始终保持水平？（Bootstrap 4）