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

217
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>

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

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

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

232
VueJS спарсить HTML

VueJS спарсить HTML

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

201