Question

所以我在这里看了关于Bootstrap重写原始CSS文件的其他问题，但没有一个帮助解决我的问题。我把我的CSS文件放在最后，没有运气。我的右上角有一个汉堡包，它变成了一个黑色方块，它可以工作但是当你点击它时，幻灯片菜单会在我的网格后面而不是在它前面。此外，我的Google字体和文本大小调整无效。我现在的链接。我的脚本文件位于正文的底部。

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link href='https://fonts.googleapis.com/css?family=Cabin:400,700|Arvo:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="AOS-Gallery.css">

https://jsfiddle.net/vrrfd1gx/4/

下面在Aziz的回答中，他帮助解决问题，菜单显示在网格后面，但声称Bootstrap并没有覆盖我的CSS。如果我去检查员查看我的页面，我可以看到它。因此，演示Aziz供应确实有效，但字体来自BS而不是我放入的字体，字体大小也是错误的。此外，我没有BS的网站设计的所有其他页面都没有像Aziz建议的那样需要增加内部div的余量，这再次让我觉得BS正在影响我的CSS。有什么想法吗？

Answer 1

我认为这不是bootstrap的问题，内部div之间没有间隙，你可以使用边距将它们分开：

.button div {
    height: 10%;
    margin-bottom: 10%;
    background: #000;
    cursor: pointer;
    transition: .5s;
}

此外，如果您希望从视口的右侧放置元素，请使用right: 50px代替left: 1000px以确保不同屏幕尺寸的一致性

.button {
    position: absolute;
    top: 30px;
    right: 50px;
    width: 45px;
    height: 50px;
}

最后，您的菜单显示在图库后面，应用更高的z-index以确保它位于顶部：

 .menu-in {
   -webkit-animation: menu-in .9s forwards ease;
   z-index:2;
 }

Working jsFiddle Demo

Bootstrap导致我的CSS问题

1 个答案: