0

假设我希望设计是这样的 在此处输入图像描述

但我目前有这个 在此处输入图像描述

我想修复导航栏以右对齐按钮并使背景与背景颜色相同，我想将表单的容器居中并在下面有页脚。这是我的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;
}
4

1 回答 1

1

使用这种方式：

<div class="offset4 span4" id="sidebar">
于 2013-06-06T10:32:19.580 回答