如何在Bootstrap中保持表单字段在同一行?

时间:2014-01-22 03:50:46

标签: html css twitter-bootstrap

我在响应式布局中使用Bootstrap 3。我想在同一条水平线上安排一个名字和姓氏的注册表格。它们应该是正常宽度的45%左右,电子邮件和通行证应该低于正常大小(如默认的Facebook主页注册。)

我想一个理想的CSS解决方案会将宽度设置为大约48%(因此中间有一些空间。)但是当我尝试在外部CSS中定义宽度%时,所有表单都垂直堆叠,无论什么(无论缩放。)

我现在正在写em的宽度。但是,使用Bootstrap的响应式布局时,当我放大或缩小超出某个限制时,表单字段会垂直堆叠,而不是并排放置。这种情况发生在Chrome的67%和110%,但在这些缩放之间效果非常好。

我在Bootstrap文档中试过这个链接,只是CSS给了我一些麻烦 - http://getbootstrap.com/css/#forms-inline

我的HTML文件:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Static Top Navbar Example for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="navbar-static-top.css" rel="stylesheet">
    <link href="my-styles.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  </head>

  <body>

    <!-- Static navbar -->
    <div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <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>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
        <!-- form starts here -->
        <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>

    <div class="container">
      <div class="row jumbotron">
        <!-- Main component for a primary marketing message or call to action -->

          <div class="col-sm-7">
            <h1>Navbar example</h1>
            <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
            <p>To see the difference between static and fixed top navbars, just scroll.</p>
            <p>
              <a class="btn btn-lg btn-primary" href="bootstrap/components/#navbar" role="button">View navbar docs &raquo;</a>
            </p>
          </div>

          <div class="col-sm-1">
          </div>


            <form class="form-signin col-sm-4 well" role="form">
              <h2 class="form-signin-heading">Sign Up</h2><hr>



              <div class="form-inline" role="form">
                <div class="form-group">
                  <label class="sr-only" for="exampleInputEmail2">Email address
                  </label>
                  <input class="form-control-md" type="text" id="exampleInputEmail2" placeholder="First Name">
                </div>

                <div class="form-group">
                  <label class="sr-only" for="exampleInputPassword2">Password
                  </label>
                  <input class="form-control-md" type="text" id="exampleInputPassword2" placeholder="Last Name"> 
                </div>
              </div>



              <p></p><p><input type="email" class="form-control" placeholder="Email address" required autofocus></p>

              <p><input type="email" class="form-control" placeholder="Type email again" required autofocus></p>

              <input type="password" class="form-control" placeholder="Password" required>

              <label class="checkbox">
                <input type="checkbox" value="remember-me"> Remember me
              </label>

              <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
            </form>


        </div>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>

MY-styles.css的

/* Layout
===========================*/

body {
    /*padding-top: 10px; */
}

.container {
    max-width: 1100px
}

.form-control-md {
  display: block;
  width: 10em;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.form-control-md:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.form-control-md:-moz-placeholder {
  color: #999999;
}

.form-control-md::-moz-placeholder {
  color: #999999;
  opacity: 1;
}

.form-control-md:-ms-input-placeholder {
  color: #999999;
}

.form-control-md::-webkit-input-placeholder {
  color: #999999;
}

.form-control-md[disabled],
.form-control-md[readonly],
fieldset[disabled] .form-control-md {
  cursor: not-allowed;
  background-color: #eeeeee;
}

textarea.form-control-md {
  height: auto;
}
/* Jumbotron
===========================

.jumbotron {

}
*/

1 个答案:

答案 0 :(得分:1)

<form class="navbar-form navbar-right form-inline" role="form">
    <div class="form-group">
    ...

您需要使用表格内联。

如果您不想使用它,可以试试这个(选项2):

http://jsfiddle.net/snlacks/499yB/

如果您需要更多说明,请与我们联系。