我有这个非常简单的代码使用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.
所以如果你简单地删除形状水平的负边距消失.
