Question

我使用了bootstrap 4，并且我创建了一个部分可折叠的侧边栏，实际上对我来说非常合适。

我的问题是，我正在尝试添加顶部标题/导航栏，其中包含切换以折叠侧边栏，并在标题导航栏的右侧我希望我的用户图标用于登录和退出等。

我创建了一个名为#userHeader的标题，它扩展了页面的宽度并容纳了切换（再次，这个部分有效）但我使用100vw作为标题并且宽度太大，因为它延伸到页面之外，你无法看到图标。

我的问题是：如何在此创建一个响应式标题，始终从侧边栏占用的空间扩展页面的剩余宽度？

换句话说，如果它没有折叠并且侧边栏占据了页面的15％，然后一旦折叠它占用了5％，标题将以现在的方式进行补偿，但是右侧总是卡在页面的右侧。

有问题的HTML块：

＆＃13;

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

＆＃13;

<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>

＆＃13;

这是一个有效的代码，我认为我只保留了最必要的HTML。所有CSS和JS都是我目前在我的页面中使用的：

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

Answer 1

为此，由于您使用的是bootstrap，因此网格系统文档可能有助于https://getbootstrap.com/docs/4.0/layout/grid/

您设置的宽度是固定的。你可能想尝试设置max-width或者设置一个＆＃39;％＆＃39;作为一个单位，因为百分比单位是相对于父元素，或在你的情况下（如我所假设）身体。

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

此外，您可能需要查看flexbox，以便更轻松地进行布局定位和响应。

Bootstrap标头以补偿可折叠的侧边栏

1 个答案: