0

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

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

我希望它如何

当前 bootstrap.css 处于活动状态时的情况

@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>

4

1 回答 1

0

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

添加width: 100%;到.nav a固定的导航链接。

添加一个padding: 10px;to.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>

我将您的导航从显示 flex 更改为阻止这意味着您可以自定义填充。flex 显示在视图中为每个元素提供相等的高度。

于 2019-03-01T19:57:18.597 回答