html - 引导标题以补偿可折叠侧边栏

问题描述

我正在使用 bootstrap 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>

这是一个工作的codepen，以为我只保留了最必要的html。所有 CSS 和 JS 都是我目前在我的页面中使用的：

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

标签： htmlcssbootstrap-4

为此，由于您使用的是引导程序，因此网格系统文档可能会有所帮助https://getbootstrap.com/docs/4.0/layout/grid/

您设置的宽度是固定的。您可能想尝试设置最大宽度或将“％”作为单位，因为百分比单位是相对于父元素，或者在你的情况下（如我所假设的）主体。

另一方面，将侧边栏和#userHeader 放在单独的列中可能有助于解决您的问题。由于 Bootstraps 网格在 12 列系统中工作，给你的侧边栏一个，（比如说）col-3 类，#userHeader 应该填写其余部分。

此外，您可能需要查看flexbox以获得更简单的布局定位和响应能力。

html - 引导标题以补偿可折叠侧边栏

问题描述

解决方案

推荐阅读