我有这个非常简单的代码使用Bootstrap 3：
<html>
<body>
<main class="container" role="main">
<form class="simple_form form-horizontal">
<div class="form-group text required campaign_url">
<label class="text required control-label" for="campaign_url"><abbr title="required">*</abbr> Url</label>
<textarea class="text required form-control" name="campaign[url]" id="campaign_url"></textarea>
</div>
它看起来像这样：
注意标签和投入是否粘在左边.检查那些元素我发现这个：
.form-horizontal .form-group {
margin-left: -15px;
margin-right: -15px;
}
解决方法
它正在发生,因为你使用的是form-horizontal,这意味着与col-*一起被用作布局.从Bootstrap文档：
Use Bootstrap’s predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn’t have to be a ). Doing so changes .form-groups to behave as grid rows,so no need for .row.
所以如果你简单地删除形状水平的负边距消失.
