#html #css
#HTML #css
Вопрос:
У меня простой вопрос о моем макете. Почему черные кнопки внизу моего экрана перекрывают мой position-absolute текст на меньших дисплеях (по высоте)? Я хочу показывать полосу прокрутки, когда для них недостаточно места.
Поэтому текст должен быть в центре экрана, а кнопки — в нижней части экрана. Минимальная высота содержимого должна быть 100vh, но если нет места, она должна быть больше (на мобильных устройствах). Кнопки не должны перекрывать текст. Что я делаю не так? Спасибо за помощь
<!doctype html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="css/newStyle.css">
<title> DOD</title></head>
<style>
html, body{
height:100%;
}
.container-fluid{
position: relative;
min-height: 100vh;
}
.carousel-item{
padding:20px;
}
#carouselExampleIndicators, .carousel-item{
min-height: 100vh;
}
.carousel-bg{
position: absolute;
top:0;
z-index: -1;
width: 100%;
min-height: 100%;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: blur(5px);
}
.black-overlay{
height:100%;
width:100%;
position: absolute;
z-index: 1;
background-color: rgba(0,0,0,0.6);
}
.carousel-indicators li:hover {
background-color: #6e43bf;
-webkit-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}
.carousel-indicators li {
text-indent: initial;
border-radius: 30px;
background-color: black;
opacity: 1;
padding: 10px 20px;
box-shadow: none;
border-width: 0px;
border-style: solid;
border-color: RGBA(0, 0, 0, 1);
margin: 5px;
color: #ffffff;
font-size: 0.9em;
text-shadow: none;
line-height: 1.2;
font-style: normal;
text-decoration: none;
text-align: center;
letter-spacing: 1px;
word-spacing: normal;
text-transform: uppercase;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
}
.carousel-content{
margin-bottom:90px;
position:absolute;
top:50%;
transform: translateY(-50%);
}
.carousel-item{
position: relative;
}
</style>
<body>
<div class="container-fluid p-0">
<div class="black-overlay"></div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators d-flex flex-wrap">
<li data-target="#carouselExampleIndicators" data-slide-to="0">
<span>
Informačné technológie
</span>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="1">
<span>
Elektrotechnika
</span>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="2">
<span>
Informačné a SieŤové technológie
</span>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="3">
<span>
Strojárstvo
</span>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="4">
<span>
Mechatronika
</span>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="5">
<span class="d-none d-md-block">
Logistika
</span>
<i class="fas fa-wrench fa-2x d-md-none"></i>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="6">
<span class="d-none d-md-block">
Technické lýceum
</span>
<i class="fas fa-wrench fa-2x d-md-none"></i>
</li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-bg" style="background-image:url('assets/slider-electro.jpg')">
</div>
<div class="carousel-content">
<p>
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
</p>
</div>
</div>
<div class="carousel-item">
<div class="carousel-bg" style="background-image:url('assets/slider-engineer.jpg')">
</div>
<div class="carousel-content">
<p>
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
</p>
</div>
</div>
<div class="carousel-item">
<div class="carousel-bg" style="background-image: url('assets/slider-ist.jpg')">
</div>
<div class="carousel-content">
<p>
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html> Ответ №1:
Потому что .carousel-индикатор также является абсолютным:
добавьте позицию: относительно класса .carousel-indicators и измените порядок html-кода. Я думаю, что это тот результат, которого вы пытаетесь достичь.
также отредактированные классы (для исправления выравнивания): .carousel-item .carousel-content .carousel-item.active
изменено свойство min-height, добавлен дополнительный класс для выравнивания. В основном для достижения этого результата использовались свойства flex.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/newStyle.css">
<title> DOD</title></head>
<style>
html, body{
height:100%;
}
.container-fluid{
position: relative;
min-height: 100vh;
display: flex;
justify-content:space-between;
flex-direction: column;
}
.extra-align {
flex: 1;
display: flex;
align-items: center;
}
.carousel-item{
padding:20px;
}
#carouselExampleIndicators, .carousel-item{
/* min-height: 100vh; */
}
.carousel-bg{
position: absolute;
top:0;
z-index: -1;
width: 100%;
min-height: 100%;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: blur(5px);
}
.black-overlay{
height:100%;
width:100%;
position: absolute;
z-index: 1;
background-color: rgba(0,0,0,0.6);
}
.carousel-indicators li:hover {
background-color: #6e43bf;
-webkit-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}
.carousel-indicators li {
text-indent: initial;
border-radius: 30px;
background-color: black;
opacity: 1;
padding: 10px 20px;
box-shadow: none;
border-width: 0px;
border-style: solid;
border-color: RGBA(0, 0, 0, 1);
margin: 5px;
color: #ffffff;
font-size: 0.9em;
text-shadow: none;
line-height: 1.2;
font-style: normal;
text-decoration: none;
text-align: center;
letter-spacing: 1px;
word-spacing: normal;
text-transform: uppercase;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
}
.carousel-content{
margin-top:10px;
margin-bottom:10px;
display:flex;
align-tems:center
}
.carousel-item.active{
position: relative;
display:flex!important;
align-items:center;
}
.carousel-item{
position: relative;
}
.carousel-indicators {
position: relative;
}
</style>
<body>
<div class="container-fluid p-0">
<div class="black-overlay"></div>
<div class="extra-align">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-bg" style="background-image:url('assets/slider-electro.jpg')">
</div>
<div class="carousel-content">
<p>
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
</p>
</div>
</div>
<div class="carousel-item">
<div class="carousel-bg" style="background-image:url('assets/slider-engineer.jpg')">
</div>
<div class="carousel-content">
<p>
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
</p>
</div>
</div>
<div class="carousel-item">
<div class="carousel-bg" style="background-image: url('assets/slider-ist.jpg')">
</div>
<div class="carousel-content">
<p>
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
</p>
</div>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators d-flex flex-wrap">
<li data-target="#carouselExampleIndicators" data-slide-to="0">
<span>
Informačné technológie
</span>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="1">
<span>
Elektrotechnika
</span>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="2">
<span>
Informačné a SieŤové technológie
</span>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="3">
<span>
Strojárstvo
</span>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="4">
<span>
Mechatronika
</span>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="5">
<span class="d-none d-md-block">
Logistika
</span>
<i class="fas fa-wrench fa-2x d-md-none"></i>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="6">
<span class="d-none d-md-block">
Technické lýceum
</span>
<i class="fas fa-wrench fa-2x d-md-none"></i>
</li>
</ol>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html> Комментарии:
1. Но теперь я не могу видеть кнопки без прокрутки при больших разрешениях
2. хорошо, итак, вам нужно удалить минимальную высоту 100vh для некоторых элементов и переместить кнопки за пределы этого родительского элемента. Я отредактирую.