Содержание страницы, включенное в панель навигации - PullRequest
Новая
       3

Содержание страницы, включенное в панель навигации

0 голосов
/ 08 апреля 2020

Первый вывод: https://ibb.co/k2RJ1m6

Чего мне нужно достичь: https://ibb.co/86nhB6m

Контент страницы - это знак X и панель инструментов. Но вместо того, чтобы быть снаружи, как 2-е изображение, оно включается внутри боковой панели. Вот код 

<body>

  <div class="wrapper">

      <nav id="sidebar">
        <!-- <script src="C-NavigationBar.js"></script> -->
      </nav>

      <div id="content">

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
           <div class="container-fluid">
              <button type="button" id="sidebarCollapse" class="navbar-btn">
                <span></span>
                <span></span>
                <span></span>
              </button>
           </div>
         </nav>
       </div>

  </div>

</body>

1 Ответ

1 голос
/ 08 апреля 2020

Я создаю стиль для вашего вывода, поэтому при добавлении стиля в ваш код он будет работать как ваше второе изображение. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <style>
  #sidebar{
    background-color:#000;
    width:230px;
    height:100vh;
    float:left;
  }
  #content{
    float:left;
    width:calc(100% - 230px);
    padding: 10px;
  }
  .navbar-btn span:first-child {
    width: 26px;
    height: 2px;
    background: #000;
    display: block;
    transform: rotate(45deg);
    margin: 0 auto;
}
.navbar-btn span:last-child {
    width: 26px;
    height: 2px;
    background: #000;
    display: block;
    transform: rotate(-45deg);
    margin: 0 auto;
}
.navbar-btn {
    width: 40px;
    height: 40px;
    border: none;
    text-align: center;
}
  </style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...