2

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

我目前正在使用一口井，我尝试了几个 Bootstrap 组件，结果完全一样。

当我的工具栏未处于“已附加”状态时，它可以正常工作，它具有适当的宽度等等，但是当 affix 启动时，它会失去它的宽度，因为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;
  }
}
4

1 回答 1

2

这是fixed元素的常见问题，因为 CSSposition: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

于 2014-05-02T15:17:01.720 回答