我有这个使用 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;
}
为什么在那里？我知道删除它很简单，但这让我怀疑我使用 Bootstrap 的方式是否错误。我应该如何使用它？
最佳答案
发生这种情况是因为您正在使用 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
<form>). Doing so changes.form-groupsto behave as grid rows, so no need for.row.
因此，如果您简单地删除 form-horizontal负边距消失了。
关于html - 为什么表单组在 Bootstrap 中有负边距？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29616408/