Question

我的bootstrap 4页面存在很大问题。我创建了我的导航栏。但是应该在xl大小上可见的数据总是隐藏的我尝试了很多现成的标题，但它始终是相同的。你能告诉我我的引导空白有什么问题吗？以下是导航栏的示例： https://codepen.io/mmekaiel/pen/ZOPKKR 在codepen工作，但当我将粘贴到我的页面时，存在同样的问题

<!DOCTYPE html>
 <html lang="en">
   <head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
     </head>
 <body>


      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

 </body>
</html>

Answer 1

您在CodePen上使用 Bootstrap 4 alpha 3 。您的代码似乎使用 Bootstrap 4 beta 。

解决此问题的最简单方法是从文档中复制新代码。例如：

＆＃13;

.container {
  /*We need this beacuse we're using
    a fixed navbar*/
  margin-top: 70px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>
<div class="container">
  <p>
    This is some long content to test the fixed navbar. Suspendisse arcu ex, dapibus nec scelerisque faucibus, sodales et orci. Aliquam vitae facilisis velit, a accumsan velit. Pellentesque porta lacus ipsum, ut fermentum urna porttitor in. Maecenas sit amet
    rhoncus massa. Etiam posuere maximus ornare. Pellentesque fringilla est sed orci pulvinar dapibus. Sed porttitor felis et dui semper, eu venenatis justo consequat. Fusce condimentum eros non massa venenatis, non pharetra est sodales. Aliquam vulputate
    vehicula ipsum, sed consectetur felis efficitur ut. Sed ullamcorper cursus odio, ac vulputate ligula. Proin at tincidunt erat. Integer ultricies blandit tortor vitae pretium. Vivamus porta dui non vestibulum ornare. In tincidunt, urna a vehicula malesuada,
    nisi mi vehicula risus, sit amet consequat eros orci a nisi. Nullam bibendum lectus eget pharetra vehicula. Nunc congue nibh id porttitor mollis. Quisque in quam eget eros pulvinar faucibus. Praesent nec finibus nisl, nec varius ante. Mauris id efficitur
    ligula. Phasellus ultricies massa ut laoreet pulvinar. Maecenas iaculis neque quis pharetra laoreet. Mauris aliquam non arcu eu aliquet. Donec vel porttitor risus, at tristique sem. Phasellus euismod libero congue mattis sodales. Integer nisi orci,
    ullamcorper sit amet ultrices eget, vulputate id odio. Sed pulvinar vitae odio sed bibendum. Nullam erat quam, dapibus quis volutpat vel, iaculis non ipsum. Mauris id placerat lacus, ut ornare turpis. Nullam vel malesuada ante. Aenean velit augue,
    vulputate vitae lorem non, ullamcorper varius mi. Maecenas pharetra eget magna ac consectetur. Nullam mattis tristique nunc, sed dictum est congue nec. Nullam ut ligula turpis. Sed elementum, eros et interdum fermentum, lacus augue volutpat ipsum,
    et tristique odio massa at mauris. Sed venenatis, odio in condimentum venenatis, felis massa commodo ante, ac ullamcorper magna ex sit amet ligula. Pellentesque porta, mi at luctus condimentum, nisi ex sagittis lacus, ac pulvinar ex diam ut diam.
    Sed ornare fringilla diam. Aenean sit amet neque sit amet nulla fringilla molestie. Vestibulum tincidunt nulla in aliquet convallis. Etiam accumsan varius convallis. Praesent congue aliquam lacus vitae condimentum.
  </p>
</div>

＆＃13;

Bootstrap 4 beta，数据始终隐藏

1 个答案: