twitter-bootstrap Twitter Bootstrap 3 - 水平表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18826592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap 3 - Horizontal Forms
提问by pee2pee
I have the following code. However the form doesn't work as intended. It has the labels/inputs below one another rather than next to one another
我有以下代码。但是，该表单无法按预期工作。它的标签/输入彼此低于而不是彼此相邻
Email (Label)
Email (Input)
Password (Label)
Password (Input)
电子邮件（标签）
电子邮件（输入）
密码（标签）
密码（输入）
Rather than
而不是
Email (Label) Email (Input)
Password (Label) Password (Input)
电子邮件（标签） 电子邮件（输入）
密码（标签） 密码（输入）
As per this example http://getbootstrap.com/css/#forms-horizontal
根据这个例子http://getbootstrap.com/css/#forms-horizontal
<!DOCTYPE html>
<html>
<head>
<title>TEMPLATE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/sticky-footer-navbar.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-latest.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
回答by Mittchel
The problem is in the paths to your CSS files. When using your code (copy pasted) in bootstrap fiddle it works as expected(http://bootply.com/81202). Since your CSS files aren't included as suspected it enables a default markup.
问题在于您的 CSS 文件的路径。在引导小提琴中使用您的代码（复制粘贴）时，它按预期工作（http://bootply.com/81202）。由于您的 CSS 文件没有被包含在内，因此它启用了默认标记。
