Bootstrap -在断点不起作用时使列可见/隐藏
Bootstrap -在断点不起作用时使列可见/隐藏
提问于 2018-08-03 22:51:59
我正在试着让我的巨无霸手机有反应。我的目标是让Logo在顶部居中，搜索/提交表单在它下面居中，包含在巨型加速器中，仅在xs/sm屏幕上(想想iphones，移动设备)。我尝试过使用多行或单行的各种方法，并使用Bootstrap Display Properties尝试在"sm“断点上隐藏第一行中的第二列，同时使第二行/列可见。我确信有一个更好的方法来做这件事(不那么多余)，但是我已经被困在这个问题上两天了，没有取得太大进展。
以下是我到目前为止所做的工作：
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>
感谢您的帮助，谢谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-03 23:02:20
“我的目标是使徽标在顶部居中，搜索/提交表单在其下方居中，包含在巨型加速器中，仅在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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51675236
复制相关文章
相似问题