Bootstrap - 使列在断点上可见/隐藏不工作答案

【问题标题】：Bootstrap - Make Columns Visible/Hidden on Breakpoints Not WorkingBootstrap - 使列在断点上可见/隐藏不工作
【发布时间】：2019-01-11 12:01:51
【问题描述】：

我正在尝试让我的 jumbotron 移动响应。我的目标是让徽标居中，搜索/提交表单居中在其下方，包含在 jumbotron 中，仅在 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>

感谢任何帮助，谢谢！

【问题讨论】：

您在哪里尝试将徽标和输入居中？
我通过添加 text-sm-center 进行了编辑，我之前有但没有工作。感谢您指出这一点。我忘记了我在发布 sn-p 之前已将其删除。

标签： html css twitter-bootstrap responsive-design bootstrap-4

【解决方案1】：

“我的目标是让徽标居中，搜索/提交表单居中在其下方，包含在 jumbotron 中，仅在 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

【讨论】：

谢谢！！这正是我想要的。