我在响应式布局中使用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 »</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 {
}
*/
答案 0 :(得分：1)
<form class="navbar-form navbar-right form-inline" role="form">
<div class="form-group">
...
您需要使用表格内联。
如果您不想使用它，可以试试这个（选项2）：
http://jsfiddle.net/snlacks/499yB/
如果您需要更多说明，请与我们联系。