表单内联和表单组的引导表单间距问题？

Question

所以我正在尝试为某人创建一个基本布局以输入他们的姓名和地址，目前它看起来像：

所以，我基本上是这样堆叠的：

<div className='form-inline'></div>
<div className='form-group'></div>
<div className='form-inline'></div>

但是为什么'form-group' 和'form-inline' 之间有一个空格？有什么办法可以把它拿出来吗？

为此，我使用了这个结构：

          <form action="" className="form-inline">
                    <div className="form-group">
                        <input
                            className="form-control"
                            placeholder="First Name"
                            }}
                        />
                    </div>
                    <div action="" className="form-group">
                        <input
                            className="form-control"
                            placeholder="Last Name"
                        />
                    </div>
                </form>
                <form action="" className="form-group">
                    <input
                        className="form-control"
                        placeholder='Street'
                    />
                </form>
                <form action="" className="form-inline">
                    <div className="form-group">
                        <input
                            className="form-control"
                            placeholder='City'
                        />
                    </div>
                    <div className="form-group">
                        <input
                            className="form-control"
                            name='state'
                            placeholder='State'
                            maxLength='2'
                            size='2'
                            type='text' 
                        />
                    </div>
                    <div className="form-group">
                        <input
                            className="form-control"
                            name='zip'
                            type='text'
                            placeholder='zip'
                            maxLength='5'
                            size='5'
                        />
                    </div>
                </form>

非常感谢任何帮助，因为我是引导程序的新手，谢谢！

Answer 1

.form-group 定义了margin-bottom: 15px;，但如果.form-group 元素定义在.form-inline 内，则它没有应用边距。

演示：

<div class="form-group"></div> <!-- margin-bottom: 15px -->

<div class="form-inline">
  <div class="form-group"></div> <!-- margin-bottom: 0 -->
</div>

所以在.form-inline中使用.form-group

<div class="form-inline">
  <div class="form-group"></div>
</div>

希望这会有所帮助！