Центрирование фиксированной ширины div в Bootstrap 4 с фиксированной разметкой верхнего / нижнего колонтитула - PullRequest
Новая
       3

Центрирование фиксированной ширины div в Bootstrap 4 с фиксированной разметкой верхнего / нижнего колонтитула

0 голосов
/ 01 февраля 2019

У меня есть фиксированный width div, который должен быть точно 816px в ширину.

Я бы хотел центрировать его на странице.

Я использую макет с фиксированным верхним / нижним колонтитулом Bootstrap 4, который имеет тело height из 100%. Я думал, что mx-auto подойдет, и он отлично смотрится на рабочем столе.

Однако на мобильном телефоне он выходит за границы, и у меня появляется горизонтальная полоса прокрутки внизу.

Вы можете запустить приведенный ниже фрагмент в полноэкранном режиме, а в консоли разработчика переключиться на мобильный: Pixel 2XL для воспроизведения. 

main > .container-fluid {
    padding: 60px 15px 0;
  }
  
  .footer {
    background-color: #f5f5f5;
  }
  
  .footer > .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
  }
  
  code {
    font-size: 80%;
  }
<html lang="en" class="h-100">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Viewer</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <link href="styles.css" rel="stylesheet">
  </head>
  <body class="d-flex flex-column h-100">
    <header>
  <!-- Fixed navbar -->
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" 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 mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</header>

<!-- Begin page content -->
<main role="main" class="flex-shrink-0">
  <div class="container-fluid">
    <h1 class="mt-5">Page title</h1>
    
    <!-- FIXED WIDTH DIV I WANTED CENTERED AND MOBILE FRIENDLY -->
    <div class="mx-auto" style="width: 816px; background-color: red;">
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
    </div>
  </div>
</main>

<footer class="footer mt-auto py-3">
  <div class="container-fluid">
    <span class="text-muted">Place sticky footer content here.</span>
  </div>
</footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 02 февраля 2019

На самом деле, если ширина зафиксирована на 816px, то, когда ширина порта просмотра меньше этого значения, произойдет переполнение, и это является причиной начала показа горизонтальной полосы прокрутки.Одно простое решение - просто изменить width:816px на max-width:816px, но ширина div уменьшится на нижних экранах.

Пример 1: 

main > .container-fluid {
    padding: 60px 15px 0;
  }
  
  .footer {
    background-color: #f5f5f5;
  }
  
  .footer > .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
  }
  
  code {
    font-size: 80%;
  }
<html lang="en" class="h-100">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Viewer</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <link href="styles.css" rel="stylesheet">
  </head>
  <body class="d-flex flex-column h-100">
    <header>
  <!-- Fixed navbar -->
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" 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 mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</header>

<!-- Begin page content -->
<main role="main" class="flex-shrink-0">
  <div class="container-fluid">
    <h1 class="mt-5">Page title</h1>
    
    <!-- FIXED WIDTH DIV I WANTED CENTERED AND MOBILE FRIENDLY -->
    <div class="mx-auto" style="max-width: 816px; background-color: red;">
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
    </div>
  </div>
</main>

<footer class="footer mt-auto py-3">
  <div class="container-fluid">
    <span class="text-muted">Place sticky footer content here.</span>
  </div>
</footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>
</html>

Однако, если вам нужно div, чтобы сохранить фиксированную ширину даже при меньших размерах экрана, вы можете использовать overflow-x:auto на его container-fluid исделать прокручиваемым только этот элемент, но не всю страницу.

Пример 2: 

main > .container-fluid {
    padding: 60px 15px 0;
  }
  
  .footer {
    background-color: #f5f5f5;
  }
  
  .footer > .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
  }
  
  code {
    font-size: 80%;
  }
<html lang="en" class="h-100">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Viewer</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <link href="styles.css" rel="stylesheet">
  </head>
  <body class="d-flex flex-column h-100">
    <header>
  <!-- Fixed navbar -->
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" 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 mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</header>

<!-- Begin page content -->
<main role="main" class="flex-shrink-0">
  <div class="container-fluid" style="overflow-x:auto">
    <h1 class="mt-5">Page title</h1>

    <!-- FIXED WIDTH DIV I WANTED CENTERED AND MOBILE FRIENDLY -->
    <div class="mx-auto" style="width: 816px; background-color: red;">
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
        <p>Test conent</p>
    </div>
  </div>
</main>

<footer class="footer mt-auto py-3">
  <div class="container-fluid">
    <span class="text-muted">Place sticky footer content here.</span>
  </div>
</footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>
</html>
0 голосов
/ 01 февраля 2019

Попробуйте добавить следующий элемент CSS в элемент div, в котором вы хотите центрировать свой контент: 

.divYouAreCenteringContentIn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

для получения дополнительной информации о flexbox, см. https://css -tricks.com / snippets /css / a-guide-to-flexbox /

Чтобы предотвратить горизонтальную полосу прокрутки, добавьте другой класс, кроме mx-auto, скажем contentList, а в css добавьте: 

.contentList {
max-width: 100%;
}

https://jsfiddle.net/oLrmwzq0/

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

Нет похожих вопросов

...