时间戳

首页 > 解决方案 > 包括 Bootstrap 混乱的 CSS

css - 包括 Bootstrap 混乱的 CSS

问题描述

我使用 html 和 css 制作了一个简单的汉堡按钮，一切正常，但我需要在我的项目中包含对齐的引导程序和所有内容，这以某种方式弄乱了我的 css。

不包括引导程序

在此处输入图像描述

包括引导程序后

在此处输入图像描述

我尝试在我的 css 样式表之前包含引导程序，这样它就不会覆盖它，但它不起作用。

这是我的代码：

HTML

<button class="menuButton">
    <div class="buttonContainer">
        <span></span>
        <span id="midspan"></span>
        <span></span>
    </div>
</button>

CSS

.menuButton{
    margin: 0;
    padding: 0;
    border: none;
    width: 0vmin;   
    overflow: hidden;
    background-color: transparent;
    animation: buttonAnim 0.75s  forwards;
    animation-delay: 0.5s;
    float: right;

}

@keyframes buttonAnim {
    100%{
        width:3vmin;
        right: 0;
    }
}

.menuButton span{
    width: 3vmin;
    height: 0.2vmin;
    margin-bottom: 0.5vmin;
    margin-top: 0.5vmin;
    display: block;
    background-color: coral;

}

.buttonContainer{
    width: 3vmin;
}

#midspan {
    transform: translate(1vmin, 0);
    transition: transform 0.3s ease;
}

.menuButton:hover {
    cursor: pointer;
}

.menuButton:hover #midspan{
    transform: translate(0);
}

标签： cssbootstrap-4

解决方案

这是因为默认bootstrap.css文件覆盖了各种 HTML 元素的默认样式。

如果您只想拥有一个没有样式的响应式网格布局，您可以在您的 HTML中包含Bootstrap 的 CSS 网格布局文件 bootstrap-grid.css，这应该可以解决问题：bootstrap-grid.min.css

<link rel="stylesheet" href="css/bootstrap-grid.css">

您可以在可在此处下载的“编译包”中找到这些内容。

注意：这个 zip 文件包含很多文件，只需使用bootstrap-grid.css或bootstrap-grid.min.css.

推荐阅读