Cделать меню адаптивным в карусельке Bootstrap

284

09 февраля 2020, 05:20

Нужно сделать меню и текст адаптивным и сохранить в том же порядке что он сейчас( текст ровно между кнопок скрола и меню именно вверху в карусельке), из-за pisition-absolute все съезжает при уменьшении экрана как я понял, но по другому не получается переместить текст и меню внутри карусельки.

.carousel-caption { 
  position: absolute; 
  top: 40%; 
  transform: translateY(-10%); 
  font-size: small; 
} 
 
.carousel-caption-2 { 
  position: absolute; 
  top: 5%; 
  margin-left: 450px; 
} 
 
#Logo { 
  position: absolute; 
  margin-left: -35%; 
  margin-top: -10px; 
} 
 
.nav { 
  color: white; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <link type="text/css" rel="stylesheet" href="test.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>Document</title> 
</head> 
 
<body> 
 
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner"> 
 
      <div class="carousel-item active"> 
        <img class="d-block w-100" src="img/btbg.jpg" alt="Первый слайд"> 
        <div class="carousel-caption d-none d-md-block"> 
          <h2>Unique and Modern Design</h2> 
          <h1 class="display-2" style="font-weight:600;">Portfolio PSD Template</h1> 
          <p>Nam liber tempor cum soluta nobies elefend option conque nihill Imper-<br>diet doming id quod mazim placerat facer possim assum</p> 
          <button type="button" class="btn btn-warning btn-lg">Get started</button> 
        </div> 
        <div class="carousel-caption-2"> 
          <img id="Logo" src="img/full-logo.png"> 
          <ul class="nav justify-content-end"> 
            <li class="nav-item"> 
              <a class="nav-link active" href="#">Home</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="#">About Us</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="#">Portfolio</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link " href="#">Features</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="#">Blog</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="#">Pricing</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="#">Shortcodes</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="#">Contact</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="#"><img src="img/icon-cart.png"></a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="#"><img src="img/icon-search.png"></a> 
            </li> 
        </div> 
      </div> 
      <div class="carousel-item"> 
        <img class="d-block w-100" src="img/btbg.jpg" alt="Второй слайд"> 
 
 
      </div> 
      <div class="carousel-item"> 
        <img class="d-block w-100" src="img/btbg.jpg" alt="Третий слайд"> 
      </div> 
    </div> 
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
      <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
    </a> 
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
      <span class="carousel-control-next-icon" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
    </a> 
  </div> 
 
  <div class="container-fluid"> 
    <div class="row jumbotron"> 
 
    </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>

введите сюда код

Синонимизатор для текста на русском языке

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Криво загружается меню на сайте

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

300

HTML

Как обозначить активный элемент в меню с использованием Bootstrap u thymeleaf?

243

HTML

Intersection Observer для первого элемента во viewport'е

Есть вот такой референс:

248

HTML

VueJS спарсить HTML

Есть страница со списком товаров, которые генереруются на PHP Хочу на JS собрать все необходимые данные по каждому товару: название, цена и другиеПотом...

266