搜索表单不像标题 Sellr Buyr 那样在超大屏幕中居中(垂直)对齐。这是代码。虽然我知道填充或添加边距会有所帮助。
我需要插入的“类”在大屏幕和中屏幕上完美对齐。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sellr Buyr</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="keywords1, change later">
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<!-- stylesheets and js paths must be updated later -->
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container"><!--fluid container-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header"><!--nav-header-->
<a class="navbar-brand" href="homepage">$ SellrBuyr</a>
</div><!--/nav-header-->
<div class="collapse navbar-collapse"><!--main-nav-collapse-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#">LOGIN<i class="caret"></i></a></li>
<li class="dropdown"><a href="#">REGISTER<i class="caret"></i></a></li>
<li class="btn-danger"><a href="#">PUBLISH YOUR AD FOR FREE</a></li>
</ul>
</div><!--/main-nav-collapse-->
</div><!--/fluid container-->
</nav>
<div class="jumbotron"><!--jumbotron-->
<div class="container"><!--container-->
<div id="logo" class="col-lg-6"><!--logo-->
<h1>Sellr Buyr</h1>
<span id="description">Sell Buy Hire Rent in India - Goods Services Products Property - Jobs and Matrimonial Services - Post Free Classified Ads Online</span>
</div><!--/logo-->
<div class="col-lg-6 "><!--col-lg-6 -->
<div class="input-group input-group-lg">
<input type="search" class="form-control" placeholder="Search Here">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div><!-- /input-group -->
</div><!-- col-lg-6 -->
</div><!--/container-->
</div><!--/jumbotron-->
</header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
</body>
</html>
我该怎么做？
最佳答案
我不认为你可以随心所欲地做到这一点。
您必须“固定”高度才能做到这一点，然后还可以使用媒体查询。
我会建议你在这里看看如何垂直对齐:
http://phrogz.net/CSS/vertical-align/index.html
让我知道您的想法，我会尽力帮助您解决一些问题。
关于html - Bootstrap 表单与搜索表单中的 h1 不对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22474352/