Question

我更改了我的引导文件，现在我的export LC_ALL="en_US.UTF-8" export LC_CTYPE="en_US.UTF-8" sudo dpkg-reconfigure locales坏了。我一直在更新代码以匹配其网站上的文档，但我无法弄清我所缺少的内容。我以为是因为此代码需要更新。 Navbar现在位于我的标题图片下

来自

Nav

到

  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-navbar-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

我在这里制作了一个Codepen-https://codepen.io/grabthereef/pen/pxGweE 在我更改版本之前，它看起来像这样；

Answer 1

如果您希望导航栏位于图像占位符的顶部，则只需将fixed-top css类添加到导航栏：

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">

Demo

文档：http://getbootstrap.com/docs/4.1/components/navbar/#placement

如果您想知道真正出了什么问题，还需要发布HTML，之前，然后再迁移到引导程序4，以便我们可以看到差异？

Answer 2

我可能是错的，但是为什么不随便交换它们：

.blank-image {
  height: 500px;
  background-image: url('https://dummyimage.com/900x500/888/fff');
}

.navbar {
  position: absolute !important;
  width: 100%;
  margin-bottom: 0;
  padding-top: 0;
  background: #000;
  border: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -o-transition: all .6s;
  -moz-transition: all .6s;
  -webkit-transition: all .6s;
  -ms-transition: all .6s;
  transition: all .6s;
  background-color: transparent !important;
}


.navbar-no-bg {
  padding-top: 10px;
  background: none;
}

ul.navbar-nav {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
}

.navbar-inverse ul.navbar-nav li a {
  color: #ddd;
  border: 0;
}

.navbar-inverse ul.navbar-nav li a:hover {
  color: #fff;
  border: 0;
}

.navbar-inverse ul.navbar-nav li a:focus {
  color: #fff;
  outline: 0;
  border: 0;
}


/* .navbar-inverse ul.navbar-nav li a.btn-link-3 {
	display: inline-block;
	margin: 9px 0 0 15px;
	padding: 6px 15px;
	background: #df6482;
	border: 0;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: #fff;
	opacity: 1;
	text-transform: uppercase;
	-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
}
.navbar-inverse ul.navbar-nav li a.btn-link-3:hover,
.navbar-inverse ul.navbar-nav li a.btn-link-3:focus,
.navbar-inverse ul.navbar-nav li a.btn-link-3:active,
.navbar-inverse ul.navbar-nav li a.btn-link-3:active:focus { 
	outline: 0; opacity: 0.6; color: #fff; 
} */

.navbar-brand {
  text-transform: uppercase;
  font-family: 'Roboto Condensed', sans-serif;
  letter-spacing: 4px;
  font-weight: 400;
  font-size: 22px;
  color: #fff !important;
  /* text-indent: -99999px; */
}

.navbar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
  margin-left: 0;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>


  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-navbar-1">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="index.php">Navbar</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="top-navbar-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Take A Tour</a></li>
          <li><a href="#">What We Offer</a></li>
          <li><a href="#">Rates</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="blank-image"></div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

升级到Bootstrap 4后如何解决我的标题？

2 个答案: