Bootstrap 3 перекрытия Navbar - PullRequest
Новая
       6

Bootstrap 3 перекрытия Navbar

0 голосов
/ 06 марта 2020

Я использую следующий код на своем сайте для меню с bootstrap 3, 

<html>
  <head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </head>
  <body>
    <nav class="navbar navbar-default" style="background: rgba(255,255,255,0.5);">
      <div class="container-fluid">
      <div class="navbar-header pull-left">
      <a href="/" class="navbar-left" style="margin-top: 5px;">Title</a>      
      </div>
        <div class="navbar-header pull-right">
        <ul class="nav pull-left">

            <li class="dropdown pull-right">
              <a href="#" data-toggle="dropdown" style="margin-top: 5px;" class="dropdown-toggle btn btn-info"><i class="fas fa-spin text-warning fa-bolt"></i>വിഭാഗങ്ങൾ<b class="caret"></b></a>
              <ul class="dropdown-menu">
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>      
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li> 
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>         
              </ul>
            </li>
          </ul>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

        </div>

        <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">


          <ul class="nav navbar-nav pull-left">

              <li><a target="_blank" class="btn btn-primary" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>
              <li><a href="/users/sign_up">Sign up</a></li>
              <li><a href="/users/sign_in">Log in</a></li>

          </ul>
        </div>
      </div>
    </nav>
  </body>
</html>

Здесь - это демонстрационная версия кода. Когда я нажимаю на складные три строки, раскрываемый контент перекрывается с панелью навигации. Как это исправить? Я попытался изменить отступы и некоторые pull-left и pull-right. Но не работает. Можете ли вы указать на ошибку, которую я сделал в коде?

1 Ответ

1 голос
/ 06 марта 2020

Вы можете добавить margin-top к bs-example-navbar-collapse-1

#bs-example-navbar-collapse-1{
  margin-top:50px;
}

Вот рабочая скрипка Здесь

...