Проблемы с получением загрузочной карусели для масштабирования на мобильный - PullRequest
Новая
       18

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

0 голосов
/ 11 марта 2019

Я боролся со страницей примера начальной загрузки карусели и создал сайт, который мне нравится, и выглядит так, как я хочу, на обычном экране ПК, но теперь я понимаю, что он не очень хорошо масштабируется, вплоть домобильный.У меня есть проблема, когда на мобильном устройстве карусель становится очень маленькой, а затем изображение, которое я поместил прямо под каруселью, также очень маленькое с большим зазором между каруселью и изображением.У кого-нибудь когда-нибудь была эта проблема?Я подозреваю, что испортил некоторые разделы с помощью начальной загрузки.Я изменил карусель так, чтобы она была только центральной секцией, а не занимала весь экран, так что это могло быть моей проблемой здесь.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=1024">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Jekyll v3.8.5">
  <title>title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/carousel/">
  <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">

  <link rel="manifest" href="/manifest.json">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
  <meta name="theme-color" content="#ffffff">

  <!-- Bootstrap core CSS -->
  <link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
  </style>
  <!-- Custom styles for this template -->
  <link href="carousel.css" rel="stylesheet">
</head>

<body>
  <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">
  <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>

  <header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mx-auto align-items-md-center">
          <li class="nav-item">
            <a class="navbar-brand" href="index.html"><img src="wordlogo2.png" style="margin: auto;"></a>
          </li>
          <li class="nav-item active dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Photos</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="1.html">1</a>
              <a class="dropdown-item" href="2.html">2</a>
              <a class="dropdown-item" href="3.html">3</a>
              <a class="dropdown-item" href="4.html">4</a>
            </div>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <main role="main">
    <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
      <!-- Indicators -->
      <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>
        <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
      </ol>
      <!-- The slideshow -->
      <div class="carousel-inner" align="center" style="border-radius: 15px; width:100%; height: 600px;">
        <div class="carousel-item active">
          <img src="1.jpg" alt="Los Angeles" style="width:100%;" class="w-50 h-50">
        </div>
        <div class="carousel-item">
          <img src="2.jpg" alt="Chicago" style="width:100%;" class="w-50 h-50">
        </div>
        <div class="carousel-item">
          <img src="3.jpg" alt="New York" style="width:100%;" class="w-50 h-50">
        </div>
        <div class="carousel-item">
          <img src="4.jpg" alt="New York" style="width:100%;" class="w-50 h-50">
        </div>
        <div class="carousel-item">
          <img src="5.jpg" alt="New York" style="width:100%;" class="w-50 h-50">
        </div>
        <div class="carousel-item">
          <img src="6.jpg" alt="New York" style="width:100%;" class="w-50 h-50">
        </div>
      </div>
      <!-- Left and right controls -->

    </div>



    <div class="container marketing">

      <div class="text-center">
        <img src="logo.png" class="text-center" width=30% height=30%>
      </div>
      <!-- Three columns of text below the carousel -->


      <div class="row">
        <div class="col-lg-3" align="center">
          <img src="1.jpg" class="rounded-circle" width="140" height="140">
          <h2>1</h2>
          <p></p>
          <p><a class="btn btn-secondary" href="1.html" role="button">View pictures &raquo;</a></p>
        </div>
        <!-- /.col-lg-3 -->
        <div class="col-lg-3" align="center">
          <img src="2.jpg" width="140" height="140" class="rounded-circle">
          <h2>2</h2>
          <p></p>
          <p><a class="btn btn-secondary" href="3.html" role="button">View pictures &raquo;</a></p>
        </div>
        <!-- /.col-lg-3 -->
        <div class="col-lg-3" align="center">
          <img src="4.jpg" width="140" height="140" class="rounded-circle">
          <h2>Wall</h2>
          <p></p>
          <p><a class="btn btn-secondary" href="Wall.html" role="button">View pictures &raquo;</a></p>
        </div>
        <!-- /.col-lg-3 -->
        <div class="col-lg-3" align="center">
          <img src="Deck1.jpg" width="140" height="140" class="rounded-circle">
          <h2>Patio</h2>
          <p></p>
          <p><a class="btn btn-secondary" href="Patio.html" role="button">View pictures &raquo;</a></p>
        </div>
        <!-- /.col-lg-3 -->
      </div>
      <!-- /.row -->

Кажется, у меня также есть проблема, когда моя панель навигации перекрывает верхнюю часть всего, что находится ниже панели навигации.Я бы предположил, что панель навигации не позволит устанавливать элементы под ней или будет иметь некоторые отступы, но даже добавление отступов к верху элементов страницы не решит эту проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...