Загрузочный заголовок для компенсации складной боковой панели

Question

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

Моя проблема в том, что я пытаюсь добавить верхний заголовок / панель навигации, которая содержитпереключатель, чтобы свернуть боковую панель и справа от панели навигации заголовка. Мне нужен мой значок пользователя для входа и выхода и т. д.

Я создал заголовок с именем #userHeader, который увеличивает ширину страницы и содержит дома.переключатель (опять же, эта часть работает), но я использовал 100vw для заголовка, и это слишком большая ширина, потому что он выходит за пределы страницы, и вы не видите значок.

Мой вопрос таков: какМогу ли я создать адаптивный заголовок, который всегда увеличивает оставшуюся ширину страницы от места, которое занимает боковая панель?

Другими словами, если он не свернут, а боковая панель занимает 15% страницы изатем, после свертывания, это занимает 5%, заголовок компенсирует то же, что и сейчас, но правая сторона всегда прилипает к правой стороне страницы.

Блок HTML, о котором идет речь:

#userHeader {
  width: 100vw;
  height: 40px;
  background-color: red;
  position: fixed;
}

#userHeader i {
  color: #FFFFFF;
  float: right;
}

<div id="secondHeader">
  <!--Note: I have no styling for this id yet-->
  <div id="userHeader">
    <button type="button" id="sidebarCollapse" class=".btn">
				<span></span>
				<span></span>
				<span></span>
			</button>
    <i id="user" class="far fa-user-circle fa-2x"></i>
  </div>
</div>

Вот рабочий кодекс, хотя я сохранил только самые необходимые html.Все CSS и JS - это то, что я сейчас использую на своей странице:

https://codepen.io/anon/pen/gKPJgq

Answer 1

Для этого, поскольку вы используете начальную загрузку, документация системы сетки может помочь https://getbootstrap.com/docs/4.0/layout/grid/

Заданная вами ширина является фиксированной.Вы можете попробовать установить максимальную ширину или поставить «%» в качестве единицы, поскольку процентные единицы относятся к родительскому элементу или в вашем случае (как я предполагаю) body.

С другой стороны,размещение боковой панели и #userHeader в отдельных столбцах может помочь решить вашу проблему.Поскольку сетка Bootstraps работает в системе с 12 столбцами, давая вашей боковой панели класс (скажем, col-3), #userHeader должен заполнить все остальное.

Кроме того, вы можете проверить flexbox для упрощения позиционирования и отзывчивости.