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

标签 html css bootstrap-4

我制作了我的第一个幻灯片菜单，一切看起来都很好，除了 菜单本身的内容。 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/

上一篇：以百分比表示的 CSS 高度，以 px 表示的父级自动和兄弟级不起作用

下一篇：html - Bootstrap 网格，在 750px 处折叠

相关文章：

html - 动态显示内联图像列表加载

javascript - jQuery，切换菜单项

javascript - 如何使用单选按钮显示和隐藏表格？

html - ionic : Can I disable the swipe action in a certain area <div> in <ion-slide>?

css - 无论窗口大小如何，div 都在屏幕上居中

html - Bootstrap 4 输入调整大小行为

javascript - 加载html页面到div，不影响div外的样式

PHP 路径位置

javascript - Require.js 加载 CDN bootstrap 和 CDN popper

html - Bootstrap 4 : align text in div vertically AND horizontally (with given div height)

©2024 IT工具网  联系我们