Question

我正在尝试使我的超大型移动设备响应。我的目标是仅在xs / sm屏幕（例如iPhone，移动设备）上，将徽标放在顶部居中，而搜索/提交表单则位于徽标下方居中。我尝试了多种方法，使用多行或单行，并使用Bootstrap Display Properties尝试在“ sm”断点上隐藏第一行中的第二列，同时使第二行/列可见。我敢肯定有更好的方法可以做到这一点（减少冗余），但是我已经坚持了2天，并没有取得太大进展。

这是我到目前为止所做的：

html {
  min-height: 100%;
  position: relative;
  box-sizing: border-box;
}

body {
  background: url('../img/grey_wash_wall.png');
}

.jumbotron {
  width: 100%;
  font-family: 'Titillium Web', sans-serif;
  box-shadow: 0px 0px 5px 2px black;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 20px;
  clear: both;
}

#header {
  text-align: left;
  letter-spacing: 2px;
}

#header-content {
  border-radius: 3px;
  font-size: 60px;
  font-weight: bold;
  margin: 0;
}

#hubBG {
  background: yellow;
  padding: 0px 2px 0px 2px;
  margin: 0px 4px 0px 4px;
  border-radius: 3px;
  box-shadow: 0px 0px 5px 2px yellow;
  border: none;
}

#motto {
  padding-top: 15px;
  margin: 0;
  font-size: 20px;
}

#form {
  overflow: hidden;
  text-align: right;
}

#input {
  color: #f8f9fa;
  border: none;
  border-bottom: #f8f9fa73 solid 1px;
  outline: none;
  width: 50%;
  background: #ffffff0c;
}

::placeholder {
  color: #f8f9fa73;
}

#btn {
  color: yellow;
  padding: 2px;
}

#btn:hover {
  color: #212529;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mike's GifHub</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <!-- CSS -->
  <link rel="stylesheet" href="assets/css/style.css">
  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- Javascript -->
  <script src="assets/js/main.js"></script>
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
</head>

<body>

  <div class="jumbotron bg-dark text-light">
    <div class="container-fluid">
      <div class="row align-items-end">
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 text-sm-center" id="header">
          <h1 id="header-content">Gif<span class="text-dark" id="hubBG">Hub</span></h1>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 d-sm-none d-md-block" id="form">
          <input type="text" placeholder="Search" class="bg-dark" id="input">
          <input type="submit" value="Submit" class="btn btn-outline-light" id="btn">
        </div>
      </div>
      <div class="row align-items-end">
        <div class="col-sm-12 d-none d-sm-block d-md-none text-sm-center" id="form">
          <input type="text" placeholder="Search" class="bg-dark" id="input">
          <input type="submit" value="Submit" class="btn btn-outline-light" id="btn">
        </div>
      </div>
    </div>
  </div>

</body>

</html>

感谢您的帮助，谢谢！

Answer 1

“我的目标是仅在xs / sm屏幕上将徽标放在顶部居中，而搜索/提交表单则位于其下方居中，”

然后只需使用responsive text alignment classes，就不必在重复标记中显示/隐藏元素。

<div class="jumbotron bg-dark text-light">
    <div class="container-fluid">
      <div class="row align-items-end">
        <div class="col-sm-6 text-center text-sm-left" id="header">
          <h1 id="header-content">Gif<span class="text-dark" id="hubBG">Hub</span></h1>
        </div>
        <div class="col-sm-6 text-center text-sm-right" id="form">
          <input type="text" placeholder="Search" class="bg-dark" id="input">
          <input type="submit" value="Submit" class="btn btn-outline-light" id="btn">
        </div>
      </div>
    </div>
</div>

https://www.codeply.com/go/hyAO1dxHhG

Bootstrap-使列可见/隐藏在断点上不起作用

1 个答案: