css - Bootstrap 相应地对齐选项卡内容

Question

我有以下标签，

参见 codepen

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4">


            <div class="halter">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>



                <div>

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist"><li><a id="hideshow" href="#" role="tab" data-toggle="tab">hide/show</a></li>   
                        <li role="presentation" class="active"><a id="tab1" href="#home" aria-controls="home" role="tab" data-toggle="tab">Default</a></li>
                        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Placeholder</a></li>
                        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Required</a></li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-2 control-label">Assword</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" placeholder="Password">
                                </div>
                            </div>  
                        </div>

                        <div role="tabpanel" class="tab-pane" id="profile">
                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-2 control-label">Bassword</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control"  placeholder="Password">
                                </div>
                            </div>
                        </div>

                        <div role="tabpanel" class="tab-pane" id="messages">
                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-2 control-label">Cassword</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control"  placeholder="Password">
                                </div></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-xs-8">
            <form class="form-horizontal">
                <div id="l2"> 

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

如何使选项卡内容正确适合带边框的 div？因为我使用了一些插件，所以我需要以某种方式保持一个相似的结构。

我不知道为什么 stackoverflow 仍然要求我提供更多详细信息，因为 fidle 中的执行代码是不言自明的。

感谢您的帮助!!

Answer 1

您可以在 form-groups 中使用关键字 row，它会适合边框，您可以在 bootstrap 上阅读更多关于网格的信息。将类行附加到每个表单内容组，如下所示:

<div class="row form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Assword</label>
    <div class="col-sm-10">
        <input type="password" class="form-control" placeholder="Password">
    </div>
</div>

例子:

.nav-tabs > li {
    float:none;
    display:inline-block;
    zoom:1;
}

.nav-tabs {
    text-align:center;
}
.nav-tabs {
    border-bottom: none;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {border-bottom:5px solid green;}

.halter{margin:5px;padding:5px;border:1px solid gray;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet prefetch" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">


            <div class="halter">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>



                <div>

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist"><li><a id="hideshow" href="#" role="tab" data-toggle="tab">hide/show</a></li>   
                        <li role="presentation" class="active"><a id="tab1" href="#home" aria-controls="home" role="tab" data-toggle="tab">Default</a></li>
                        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Placeholder</a></li>
                        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Required</a></li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <div class="form-group row">
                                <label for="inputPassword3" class="col-sm-2 control-label">Assword</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" placeholder="Password">
                                </div>
                            </div>  
                        </div>

                        <div role="tabpanel" class="tab-pane" id="profile">
                            <div class="form-group row">
                                <label for="inputPassword3" class="col-sm-2 control-label">Bassword</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control"  placeholder="Password">
                                </div>
                            </div>
                        </div>

                        <div role="tabpanel" class="tab-pane" id="messages">
                            <div class="form-group row">
                                <label for="inputPassword3" class="col-sm-2 control-label">Cassword</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control"  placeholder="Password">
                                </div></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-xs-8">
            <form class="form-horizontal">
                <div id="l2"> 

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