Bootstrap css отменяет css моего слайдменю - PullRequest
Новая
       0

Bootstrap css отменяет css моего слайдменю

0 голосов
/ 01 марта 2019

Я сделал свое первое слайдменю, и все выглядит нормально, кроме содержимого в самом меню.В слайдменю есть довольно большие промежутки между каждой ссылкой, и отключение таблицы стилей загрузки заставит ее выглядеть так, как я хочу.

Есть ли что-то, что мне нужно изменить в 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>

1 Ответ

0 голосов
/ 01 марта 2019

Я отредактировал несколько ваших тегов 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, чтобы заблокировать это означает, что вы можете настроить отступы.Гибкий дисплей давал каждому элементу равную высоту в представлении.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...