Twitter bootstrap 如何使导航始终保持水平？（引导程序4）_Twitter Bootstrap_Bootstrap 4

Twitter bootstrap 如何使导航始终保持水平？（引导程序4）

twitter-bootstrap bootstrap-4

Twitter bootstrap 如何使导航始终保持水平？（引导程序4）,twitter-bootstrap,bootstrap-4,Twitter Bootstrap,Bootstrap 4,我正试图使用Bootstrap4中的代码使我的导航系统响应。我希望它们始终保持水平，所以我必须使用类：flex column flex row flex fill text center而不是flex column flex xs row flex xs fill text xs center，因为我正在使用BS4，但这两种方式都不起作用。顺便问一下，请向我解释一下，在让导航系统负责的过程中，这些类别中的每一个都扮演着什么角色，我的意思是，如果我删除其中一个，会影响到什么 <link re

我正试图使用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>

你有什么理由需要弹性体吗，伙计

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

下面的方法将链接放入列表中。如果您想成为完全有效的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>

希望有帮助