Question

我使用div tag创建了一个包含4 tabs的导航栏。

我在此导航栏上使用了affix concept。注意我的应用程序页面使用row类分为三个部分 - 页面的左右部分使用col-lg-2类为空，在页面中间，我试图显示下面的内容col-lg-8课程。我页面的每个内容都在col-lg-8类下。

        <div class="row" style="background-color:#4C97C8;" data-spy="affix" data-offset-top="150">
            <div class="btn col-xs-12 col-sm-6 col-md-3 col-lg-3" style="color:white;height:30px" ng-click="jump(1)" ng-mouseenter="hovering=true" ng-mouseleave="hovering=false" ng-class="{'clicked': hovering}">
            <strong>ABOUT</strong>
            </div>
            <div class="btn col-xs-12 col-sm-6 col-md-3 col-lg-3" style="color:white;height:30px" ng-click="jump(2)" ng-mouseenter="hovering2=true" ng-mouseleave="hovering2=false" ng-class="{'clicked': hovering2}">
            <strong>FEATURE REQUEST</strong>
            </div>
            <div class="btn col-xs-12 col-sm-6 col-md-3 col-lg-3" style="color:white;height:30px" ng-click="jump(3)" ng-mouseenter="hovering1=true" ng-mouseleave="hovering1=false" ng-class="{'clicked': hovering1}">
            <strong>PRODUCT</strong>
            </div>
            <div class="btn col-xs-12 col-sm-6 col-md-3 col-lg-3 bg-primary" style="color:white;height:30px">
            <strong>PRODUCT LINE</strong>
            </div>
        </div>

css是 -

.affix {
  top: 0;
  width:100%;
}

.affix + .container-fluid {
  padding-top: 70px;
}

问题是 - 其他内容如按钮，手风琴面板在此导航栏上移动。另一个是 - 当粘贴效果发生时，导航栏出现在更大屏幕尺寸的col-lg-8类中。

有什么问题？ jsfiddle链接 - https://jsfiddle.net/shashankg/707n3r21/

Answer 1

只需将z-index: 10;添加到你的词缀中，就像我在这里做的那样：

.affix {
  top: 0;
  width: 100%;
  z-index: 10;
}

这应该可以解决你的问题：）

工作解决方案：https://jsfiddle.net/707n3r21/3/

如果你想了解更多关于z-index的信息，你应该看看这个文档：http://www.w3schools.com/cssref/pr_pos_z-index.asp

//编辑：

要解决您的其他问题，请将affix-css的宽度更改为66.66666667%。这个宽度与col-lg-8（bootsrap.css）

的宽度相同

.affix {
  top: 0;
  width: 66.66666667%;
  z-index: 10;
}

工作解决方案：https://jsfiddle.net/707n3r21/4/

//编辑：

对于较小的屏幕，请将此添加到您的css：

@media (max-width: 1199px) {
    .affix {
      width: 100% !important;
  }
}

现在我们应该修复一切： https://jsfiddle.net/707n3r21/10/

Bootstrap内容移动到附件上

1 个答案: