twitter-bootstrap - 表格组边距底部已删除

Question

我在 Bootstrap 选项卡面板中创建一个带有一些 form-group 元素的嵌套行。 不幸的是，尽管 form-group 在 中有 15px 的 margin-bottom，但这些表单组在垂直方向上的间距不正确 Bootstrap .css。 任何人都可以提出原因和解决方案吗？

请看下面fiddle理解。

谢谢

Answer 1

我建议你使用http://getbootstrap.com/css/#forms-horizontal

看看DEMO

---

标记

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox-content">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Tab1</a></li>
                    <li role="presentation"><a href="#properties" aria-controls="properties" role="tab" data-toggle="tab">Tab2</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <div class="row">
                            <div class="col-md-6">
                                <form class="form-horizontal">
                                  <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">Field</label>
                                    <div class="col-sm-10">
                                      <input type="text" class="form-control" placeholder="Value">
                                    </div>
                                  </div>
                                  <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-2 control-label">Field</label>
                                    <div class="col-sm-10">
                                      <input type="text" class="form-control" placeholder="Value">
                                    </div>
                                  </div>
                                </form>
                            </div>
                            <div class="col-md-6">
                                <form class="form-horizontal">
                                  <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">Field</label>
                                    <div class="col-sm-10">
                                      <input type="text" class="form-control" placeholder="Value">
                                    </div>
                                  </div>
                                  <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-2 control-label">Field</label>
                                    <div class="col-sm-10">
                                      <input type="text" class="form-control" placeholder="Value">
                                    </div>
                                  </div>
                                </form>
                            </div>
                        </div>
                    </div>
                        <div role="tabpanel" class="tab-pane" id="properties">
                        <div class="row">
                            <div class="col-md-12">
                                <input type="hidden" id="hiddenJson" value="@ViewBag.Json">
                                <div class="well" style="min-height: 190px;">some data</div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>