Navbar bootstrap
1.4K
3
Добрый день!
Начал путь становления джуном. Делаю некий интернет магазин. Обратите внимание на прикреплённую пикчу. Это кусок страницы который содержит навбар. Суть в том, что весь контент лежит под навбаром, только кнопки расположились над ним.
Я не понимаю кто в этом виноват, навбар или кнопки и как это исправить? Кнопки лежат в 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, а с решением, которые вы используете.