Question

如何在搜索引导程序4中将搜索栏置于屏幕中间（在页脚和导航之间水平和垂直）的中心，并使其对移动设备做出响应。

我尝试使用自定义样式强制它（没有引导程序）.centerd。

但是，当我这样做时，页脚在小型移动设备中位于搜索栏的顶部，并且似乎不是很敏感。

＆＃13;

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

＆＃13;

/*
 * 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;
}

＆＃13;

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

＆＃13;

Answer 1

如何在搜索引导程序4中将搜索栏置于屏幕中间（在页脚和导航之间水平和垂直）的中心，并使其对移动设备做出响应。

要使搜索栏水平居中，您只需要有效的HTML（某些HTML当前无效），然后您需要将Bootstrap列放入Bootstrap行并将其放入Bootstrap容器中，如下所示：

＆＃13;

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

＆＃13;

以水平和垂直为中心，您可以这样做：

＆＃13;

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

＆＃13;

因此，您将所有内容放在一个.container中，然后将style="min-height: calc(100vh - 66px);"之类的内容添加到主内容行以定义高度。

100vh表示100％视口高度，然后您减去标题/导航所占用的像素数（在本例中我使用了66px）。

行中心的

align-items-center类垂直对齐内容。

页脚上的fixed-bottom会给你一个粘性页脚。

Bootstrap 4，SearchBar绝对中心并使其响应

1 个答案: