假设我希望设计是这样的
但我目前有这个
我想修复导航栏以右对齐按钮并使背景与背景颜色相同，我想将表单的容器居中并在下面有页脚。这是我的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="widh=device-width, initial-scale=1.0">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<header class="row">
<div class="span12">
<nav class="navbar">
<div class="navbar-inner">
<div class="container">
<a href="#" class="brand"><img src="images/title_logo.png"/>
<ul class="nav">
<li class="divider-vertical"></li>
<li><a href="index.html">Log in</a></li>
<li class="divider-vertical"></li>
<li><a href="register.html">Register</a></li>
<li class="divider-vertical"></li>
<li><a href="#">About</a></li>
<li class="divider-vertical"></li>
</div>
</div>
</nav>
</div>
<div class="row2" id="main-content">
<div class="span4" id="sidebar">
<div class="well">
<form>
<fieldset class="register">
<legend>Register</legend>
<input type="text" class="input-block-level"placeholder="first name">
<input type="text" class="input-block-level"placeholder="last name">
<input type="text" class="input-block-level"placeholder="email address">
<input type="text" class="input-block-level"placeholder="confirm email address">
<input type="text" class="input-block-level"placeholder="email address">
<input type="text" class="input-block-level"placeholder="password">
<input type="text" class="input-block-level"placeholder="confirm password">
<img src="images/button_submit"/>
</fieldset>
</div>
</div>
<div class="span8"></div>
</div>
</header>
<div class="row"></footer>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
我正在为 CSS 使用引导程序
.navbar {
*position: relative;
*z-index: 2;
margin-bottom: 20px;
overflow: visible;
}
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #F9F7F2;
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x;
border: 0 solid #F9F7F2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
.navbar-inner:before,
.navbar-inner:after {
display: table;
line-height: 0;
content: "";
}
.navbar-inner:after {
clear: both;
}
.navbar .container {
width: auto;
}