个人中心
gpt4 book ai didi

html - Bootstrap css 否决了我的 slidemenu 的 css

转载 作者：行者123 更新时间：2023-11-28 00:19:17 26 4
gpt4 key购买 nike

我制作了我的第一个幻灯片菜单，一切看起来都很好，除了 菜单本身的内容。 slidemenu 在每个链接之间有相当大的空间，禁用 Bootstrap 样式表将使它看起来像我想要的那样。

我需要在 Bootstrap.css 中更改什么吗？

How i want it to be

how it currently is with bootstrap.css active 

@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:800');

body{
    font-family: 'Alegreya Sans', sans-serif;
    overflow-x: hidden;
}

.nav{
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    opacity: .9;
    overflow-x: hidden;
    padding-top: 60px;
    transition: .7s;
}

.nav a {
    display: block;
    padding: 20px 30px;
    font-size: 25px;
    text-decoration: none;
    color: #ccc;
}
.nav a:hover {
    color: #fff;
    transition: .4s;
}

.nav .close{
    position: absolute;
    top: 0;
    right: 22px;
    margin-left: 50px;
    font-size: 30px;
}

.slide a{
    color: #000;
    font-size: 36px;

}
#sidemenu{
    padding: 20px;
    transition: margin-left .7s;
    overflow: hidden;
    width: 100%;
}
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--scripts-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js">
    </script>
    <script>
        function openSlideMenu() {
            document.getElementById('menu').style.width = '250px';
            document.getElementById('slidemenu').style.marginLeft= '250px';
        }
        function closeSlideMenu() {
            document.getElementById('menu').style.width = '0px';
            document.getElementById('slidemenu').style.marginLeft= '0px';
        }
    </script>

    <!--css-->
    <link rel="stylesheet" href="../css/Index.css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Frontpage</title>
</head>
<body>

<div id="slidemenu">
                <span class="slide">
                    <a href="#" onclick="openSlideMenu()">
                        <i class="fas fa-bars"></i>
                    </a>
                </span>

                <div id="menu" class="nav">
                    <a href="#" class="close" onclick="closeSlideMenu()">
                        <i class="fas fa-times"></i>
                    </a>

                    <!--Links slidemenu-->
                    <a href="#">home</a>
                    <a href="#">about</a>
                    <a href="#">services</a>
                    <a href="#">portofolio</a>
                    <a href="#">contact</a>
                    <!--end of Links slidemenu-->
                </div>
</div>


<div class="container">
        <div class="row">
            <div class="col-md-4">
                <div id="text1">
                    <p>x</p>
                </div>
            </div>

            <div class="col-md-4">
                <div id="text2">
                    <p>x</p>
                </div>
            </div>

            <div class="col-md-4">
                <div id="text3">
                    <p>x</p>
                </div>
            </div>

        </div>
</div>


 Optional JavaScript 
 jQuery first, then Popper.js, then Bootstrap JS 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

最佳答案

我编辑了一些你的 css 标签来重新定位导航

添加 width: 100%; 到 .nav a 修复了导航链接。

添加 padding: 10px; 到 .slide a 为您的菜单图标打开一些空间。

最后添加 left: 130px; 到 .nav .close 将使图标更靠近原始位置。

@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:800');

body{
    font-family: 'Alegreya Sans', sans-serif;
    overflow-x: hidden;
}

.nav{
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    opacity: .9;
    overflow-x: hidden;
    padding-top: 60px;
    transition: .7s;
    display: block !important;
}

.nav a {
    display: block;
    padding: 10px 30px;
    font-size: 25px;
    text-decoration: none;
    color: #ccc;
    width: 100%;
}
.nav a:hover {
    color: #fff;
    transition: .4s;
}

.nav .close{
    position: absolute;
    top: 0;
    right: 22px;
    margin-left: 50px;
    font-size: 30px;
    left: 130px;
}

.slide a{
    color: #000;
    font-size: 36px;
    padding: 10px;

}
#sidemenu{
    padding: 20px;
    transition: margin-left .7s;
    overflow: hidden;
    width: 100%;
}


.slide {
  
}
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--scripts-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js">
    </script>
    <script>
        function openSlideMenu() {
            document.getElementById('menu').style.width = '250px';
            document.getElementById('slidemenu').style.marginLeft= '250px';
        }
        function closeSlideMenu() {
            document.getElementById('menu').style.width = '0px';
            document.getElementById('slidemenu').style.marginLeft= '0px';
        }
    </script>

    <!--css-->
    <link rel="stylesheet" href="../css/Index.css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Frontpage</title>
</head>
<body>

<div id="slidemenu">
                <span class="slide">
                    <a href="#" onclick="openSlideMenu()">
                        <i class="fas fa-bars"></i>
                    </a>
                </span>

                <div id="menu" class="nav">
                    <a href="#" class="close" onclick="closeSlideMenu()">
                        <i class="fas fa-times"></i>
                    </a>

                    <!--Links slidemenu-->
                    <a href="#">home</a>
                    <a href="#">about</a>
                    <a href="#">services</a>
                    <a href="#">portofolio</a>
                    <a href="#">contact</a>
                    <!--end of Links slidemenu-->
                </div>
</div>


<div class="container">
        <div class="row">
            <div class="col-md-4">
                <div id="text1">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>

            <div class="col-md-4">
                <div id="text2">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>

            <div class="col-md-4">
                <div id="text3">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>

        </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

我将您的导航从 display flex 更改为 block，这意味着您可以自定义填充。 Flex 显示为 View 中的每个元素提供了相同的高度。

关于html - Bootstrap css 否决了我的 slidemenu 的 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54951075/

26 4 0
文章推荐： c++ - C++中的 block 局部变量
文章推荐： javascript - 获取 td 父级和 tr 子级
文章推荐： java - 如何通过软件浏览网站？
文章推荐： javascript - 当 H1 是根元素时，如何让 TinyMCE 允许文本对齐？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com