Как я могу исправить свой заголовок после обновления до Bootstrap 4? - PullRequest
Новая
       2

Как я могу исправить свой заголовок после обновления до Bootstrap 4?

0 голосов
/ 26 октября 2018

Я изменил свои файлы начальной загрузки, и теперь мой 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>

до 

  <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
     target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
  </button>

Я сделал здесь кодовую ручку - https://codepen.io/grabthereef/pen/pxGweE До того, как я сменил версию, она выглядела так:

enter image description here

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Если вы хотите, чтобы панель навигации находилась над заполнителями изображений, вам просто нужно добавить класс fixed-top css к панели навигации: 

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

Демо

Документация: http://getbootstrap.com/docs/4.1/components/navbar/#placement

Если вы хотите узнать, что на самом деле пошло не так, вам нужно также опубликовать HTML до того, как вы переместились в bootstrap 4, чтобычто мы видим различия?

0 голосов
/ 26 октября 2018

Я могу ошибаться, но почему бы просто не поменять их местами: 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...