引导表单间距问题与form-inline和form-group？

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-group

中使用.form-inline

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

希望这有帮助！