Bootstrap 4, SearchBar Absolute Center и сделать его адаптивным

как центрировать панель поиска по центру экрана (по горизонтали и вертикали между нижним колонтитулом и навигацией) в начальной загрузке 4 и сделать ее адаптивной для мобильных устройств.

Я попытался сделать это, заставив его (без начальной загрузки) использовать собственный стиль .centeredd.

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

<!-- Initialize Bootstrap functionality -->
// Initialize tooltip component
$(function() {
  $('[data-toggle = "tooltip"]').tooltip()
})

// Initialize popover component
$(function() {
  $('[data-toggle = "popover"]').popover()
})

/*
 * Masthead for nav
 */

.blog-masthead {
  background-color: #0275D8;
  -webkit-box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
}


/* Nav links */

.blog-nav-item {
  position: relative;
  display: inline-block;
  padding: 10px;
  font-weight: 500;
  color: #fff;
}

.blog-nav-item:hover,
.blog-nav-item:focus {
  color: #fff;
  text-decoration: none;
}


/* Active state gets a caret at the bottom */

.blog-nav .active {
  color: #fff;
}

.blog-nav .active:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  vertical-align: middle;
  content: " ";
  border-right: 5px solid transparent;
  border-bottom: 5px solid;
  border-left: 5px solid transparent;
}

* {
  border-radius: 0 !important;
}

* {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}


/*
 * Blog name and description
 */


/*
 * Footer
 */

.blog-footer {
  padding: 40px 0;
  color: #999;
  text-align: center;
  background-color: #f9f9f9;
  border-top: 1px solid #e5e5e5;
}

.blog-footer p:last-child {
  margin-bottom: 0;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

section {
  padding: 70px 0;
  border-bottom: 1px dotted #ccc;
}

.grid-example div[class^ = "col"] {
  border: 1px solid white;
  background: lightblue;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 8px;
}

.jumbotron {
  background-color: lightskyblue;
}

table th {
  text-align: center;
}

.table {
  margin: auto;
  width: 50% !important;
}

.table td {
  text-align: center;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  color: #fff;
  text-align: center;
  background-color: #0275D8;
}

a {
  color: #f00;
}

a:hover {
  color: #0f0;
}

<html lang = "en">

<head>
  <meta charset = "utf-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
  <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name = "description" content = "">
  <meta name = "author" content = "">
  <link rel = "icon" href = "/favicon.ico">

  <style type = "text/css">
    html,
    body {
      overflow-x: hidden;
    }
    
    .centeredd {
      position: fixed;
      top: 50%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
    }
  </style>
  <title>Bootstrap 4 Template</title>

  <link rel = "stylesheet" href = "Navigation Bar.css">
  <link rel = "stylesheet" href = "Sticky Footer.css">
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin = "anonymous">

</head>

<body>

  <div class = "blog-masthead col-xs-12">
    <div class = "container">
      <nav class = "blog-nav">
        <a class = "blog-nav-item active" href = "#">Home</a>
        <a class = "blog-nav-item" href = "#">New features</a>
        <a class = "blog-nav-item" href = "#">Press</a>
        <a class = "blog-nav-item" href = "#">New hires</a>
        <a class = "blog-nav-item" href = "#">About</a>
      </nav>
    </div>
  </div>
  <div class = "col-lg-6 mx-auto">
    <div class = "input-group">
      <input type = "text" class = "form-control" placeholder = "Search for...">
      <span class = "input-group-btn">
        <button class = "btn btn-secondary" type = "button">Go!</button>
      </span>
    </div>
    </div>
  </div>
  <footer class = "footer">
    <div class = "container">
      <span class = "text">Place sticky footer content here.</span>
    </div>
  </footer>
  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->

  <!-- jQuery library -->
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity = "sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin = "anonymous"></script>

  <!-- Tether -->
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity = "sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin = "anonymous"></script>

  <!-- Latest compiled JavaScript -->
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity = "sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin = "anonymous"></script>

</body>

</html>

html css bootstrap-4

20.03.2018 11:05

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

2 072

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

how to center a search bar in middle of screen (horizontally and vertically between footer and navigation) in bootstrap 4 and make it responsive for mobile devices.

Чтобы центрировать панель поиска по горизонтали, вам просто нужен действительный HTML (часть вашего HTML в настоящее время недействительна), а затем вам нужно поместить столбец Bootstrap в строку Bootstrap и поместить его в контейнер Bootstrap следующим образом:

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
    
<div class = "container">
    <div class = "row">
        <div class = "col-lg-6 mx-auto">
            <div class = "input-group">
                <input type = "text" class = "form-control" placeholder = "Search for...">
                <span class = "input-group-btn">
                    <button class = "btn btn-secondary" type = "button">Go!</button>
                </span>
            </div>
        </div>
    </div>
</div>

Чтобы центрировать оба по горизонтали и вертикали, вы можете сделать это:

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">

<div class = "container">
    <div class = "blog-masthead">
        <nav class = "blog-nav">
            <a class = "blog-nav-item active" href = "#">Home</a>
            <a class = "blog-nav-item" href = "#">New features</a>
            <a class = "blog-nav-item" href = "#">Press</a>
            <a class = "blog-nav-item" href = "#">New hires</a>
            <a class = "blog-nav-item" href = "#">About</a>
        </nav>
    </div>

    <div class = "row align-items-center" style = "min-height: calc(100vh - 66px);">
        <div class = "col-lg-6 mx-auto">
            <div class = "input-group">
                <input type = "text" class = "form-control" placeholder = "Search for...">
                <span class = "input-group-btn">
                    <button class = "btn btn-secondary" type = "button">Go!</button>
                </span>
            </div>
        </div>
    </div>

    <footer class = "footer fixed-bottom text-center">
        <span class = "text">Place sticky footer content here.</span>
    </footer>
</div>

Итак, вы помещаете все в один .container, а затем добавляете что-то вроде style = "min-height: calc(100vh - 66px);" в основную строку содержимого, чтобы определить высоту.

100vh означает 100% высоту области просмотра, а затем вы вычитаете количество пикселей, занимаемых заголовком / навигацией (в этом примере я использовал 66 пикселей).

Класс align-items-center в центре строки выравнивает содержимое по вертикали.

А fixed-bottom в нижнем колонтитуле дает вам липкий нижний колонтитул.

Я попробовал ваш код, и он сработал, как мне сделать так, чтобы он был центрирован по вертикали между нижним колонтитулом и навигацией?

— 20.03.2018 11:20

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

— 20.03.2018 11:41

20.03.2018 11:11