如何在 Bootstrap 3 中创建带有词缀的流畅且响应迅速的水平工具栏？

Question

正如我在标题中所说，我正在尝试在 Bootstrap 中创建一个带有词缀的水平工具栏。我不介意工具栏是否包裹在井、导航或面板中，只要它是水平的并使用词缀即可。

我现在用的是一口井，我试过几个Bootstrap组件，结果完全一样。

当我的工具栏未处于“已附加”状态时，它可以正常工作，它具有适当的宽度等等，但是当词缀启动时，它会失去它的宽度，因为position: fixed。据我所知，具有固定位置的元素必须提供特定的宽度，这很好，我的问题是我找不到准确可靠的方法来保持工具栏在“固定”之前的宽度，这将在设备分辨率方面有所不同。

如何为“附加”工具栏提供适当的宽度？如果我不提供宽度，则工具栏太小；如果我提供 100% 的宽度，工具栏会在右侧溢出，并且缺少一些 UI 元素。

这是一个重现我遇到的完全相同问题的示例：http://www.bootply.com/DAOHegIaTl。

这是用于词缀的 CSS：

@media (max-width: 767px) {
  #content-library-toolbar.affix
  {
    top: 100px;
    z-index:1;
  }
}

@media (min-width: 768px) {
  #content-library-toolbar.affix
  {
    top: 50px;
    z-index:1;
  }
}

Answer 1

这是 fixed 元素的常见问题，因为 CSS position:fixed 会从页面流中删除该元素。 fixed 元素不再与其容器和相邻元素相关。

在您的情况下，fixed 工具栏元素的宽度是问题所在。您可以使用 jQuery 挂钩 affix 插件事件。第一个事件在工具栏被附加之前获取工具栏的宽度，第二个事件在工具栏被附加后设置宽度..

var myWidth;
$('#content-library-toolbar').bind('affix.bs.affix', function () {
  myWidth = $(this).width();
});

$('#content-library-toolbar').bind('affixed.bs.affix', function () {  
  $(this).width(myWidth);
});

演示：http://www.bootply.com/oc8MgNC2Od