Navbar bootstrap
Добрый день!
Начал путь становления джуном. Делаю некий интернет магазин. Обратите внимание на прикреплённую пикчу. Это кусок страницы который содержит навбар. Суть в том, что весь контент лежит под навбаром, только кнопки расположились над ним.
Я не понимаю кто в этом виноват, навбар или кнопки и как это исправить? Кнопки лежат в div который обёрнут в div с пикчей, пикча под навбаром, а кнопка — над. Я почти все компоненты не пишу сам, а адаптирую чужие под свои нужды и из-за этого упускаю ошибку. Мне кажется что всё дело в class`ах, возможно они как-то конфликтуют и движок не понимает что ему рисовать.

кусок вёрстки содержащий кнопки
кусок вёрстки содержащий навбар
Начал путь становления джуном. Делаю некий интернет магазин. Обратите внимание на прикреплённую пикчу. Это кусок страницы который содержит навбар. Суть в том, что весь контент лежит под навбаром, только кнопки расположились над ним.
Я не понимаю кто в этом виноват, навбар или кнопки и как это исправить? Кнопки лежат в div который обёрнут в div с пикчей, пикча под навбаром, а кнопка — над. Я почти все компоненты не пишу сам, а адаптирую чужие под свои нужды и из-за этого упускаю ошибку. Мне кажется что всё дело в class`ах, возможно они как-то конфликтуют и движок не понимает что ему рисовать.

кусок вёрстки содержащий кнопки
<template> <v-layout class="product_holder"> <div> <v-text-field clearable type="text" v-model="search" label="Поиск" prepend-icon="mdi-magnify"> </v-text-field> </div> <div v-for="product in getFilteredProductList" class="product"> <div class="product_img_holder"><img class="product_img" :src="product.img" alt="iphone 10"/></div> <div class="product_info"> <span>{{product.title}}</span> <span>{{product.price}}</span> <span>{{product.description}}</span> </div> <div class="btn_holder"> <v-btn style="background-color: rgba(126,7,113,0.66)" class="button is-success" @click="addToCart(product)"> <v-icon dark left> {{'mdi-basket-fill'}} </v-icon> купить </v-btn> <v-btn style="background-color: rgba(7,2,126,0.66)" @click="goToAboutPage"> описание </v-btn> </div> </div> </v-layout> </template>
кусок вёрстки содержащий навбар
<template> <nav class="navbar navbar-expand-lg"> <div class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <nuxt-link no-prefetch exact active-class="active" class="nav-link" to="/"> Home </nuxt-link> </li> <li class="nav-item"> <nuxt-link active-class="active" class="nav-link" to="/About"> About </nuxt-link> </li> <li class="nav-item"> <nuxt-link active-class="active" class="nav-link" to="/Catalog"> Catalog </nuxt-link> </li> <li class="nav-item"> <nuxt-link active-class="active" class="nav-link" to="/users"> Users </nuxt-link> </li> <li class="nav-item" v-if="!hasToken"> <nuxt-link active-class="active" class="nav-link" to="/Login"> Login </nuxt-link> </li> <li class="nav-item" v-else> <a @click.prevent="logout" class="nav-link" href="#"> Logout </a> </li> <li class="nav-item" style="padding-left: 30%"> <v-text-field clearable dark type="text" v-model="search" label="Поиск" prepend-icon="mdi-magnify"> </v-text-field> </li> </ul> </div> </nav> </template>
Если статья понравилась, то поделитесь ей в социальных сетях:
Комментарии ()
Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.
Это определяют стили (CSS), которые вы добавляете к элементам с помощью классов.
Чтобы разобраться почему у вас так получилось, вам необходимо разобраться с этими стилями.
Это ситуация возникает когда вы «вырываете» элемент из потока и не можете его корректно расположить на странице. При этом элементы, которые находятся вне потока можно двигать по оси Z, т.е. приближать их к себе, либо отдалять их от себя. В вашем случае у элементов, если наблюдается такая картина, не правильно выставлено значение CSS-свойства z-index.
Если есть желание разобраться, то прочитайте статью про способы позиционирования элементов в CSS.
Перебирал все CSS классы у навбара и кнопок, все они знакомые и ни один не помог.
Перечитал статью, в статье как раз нашёл то что нужно, прописал z-index: -1 к class=«btn_holder» — ситуация исправилась. Теперь отображается как надо. Но честно говоря, мне это не нравиться, «костыль» какой-то получается. Не красиво.
Насколько я понимаю навбар в принципе «вырван» из потока потому что он «fixed to the top». Если ли какой-то способ избежать моей ситуации, просто прописывать костыли к контенту это не дело?
Спасибо
Тут вам нужно разбираться с макетом, который вы используете и изменить его, если в нём есть недочёты, чтобы не добавлять новые стили для правки этих ситуаций.
А так да, если navbar имеет fixed-top, то он конечно будет вырван из потока. Но в вашем случае z-index у .btn_holder больше чем у navbar, если он располагался таким образом. Но такого элемента как .btn_holder в самом Bootstrap нет, поэтому это конечно связано не с самим Bootstrap, а с решением, которые вы используете.