为什么表单组在Bootstrap中有负余量？

Question

为什么表单组在Bootstrap中有负余量？

我使用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>

Run Code Online (Sandbox Code Playgroud)

它看起来像这样:

在此输入图像描述

注意标签和输入是如何粘在左边的.检查这些元素我发现了这个:

.form-horizontal .form-group {
  margin-left: -15px;
  margin-right: -15px;
}

Run Code Online (Sandbox Code Playgroud)

那为什么？我知道移除它是微不足道的,但它让我想知道我使用Bootstrap的方式是否错误.我该怎么用？

Answer 1

Zim*_*Zim 14

它正在发生,因为你正在使用form-horizontal它被用作一行以及col-*用于布局.从Bootstrap文档:

使用Bootstrap的预定义网格类通过向表单添加.form-horizontal(不必是a <form>)来在水平布局中对齐表单控件的标签和组.这样做的更改.form-groups就像网格行一样,所以不需要.row.

因此,如果您只是删除form-horizontal负边距就会消失.

http://codeply.com/go/QQnqgfKv9v

归档时间：	10 年，4 月前
查看次数：	6555 次
最近记录：	6 年，2 月前