面板主体中的内容与引导选项卡药丸重叠

Question

>我有一个大问题，我希望选项卡窗格的内容相互重叠，就像它们彼此不认识一样。目前我的代码被保存在这个小提琴上： https://jsfiddle.net/axq882de/1/当我单击它们时，每个选项卡中的内容应该在同一位置

<div class="container">
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">Die Projekte</div>
<ul class="nav nav-tabs" id='nav-wrapper'>
        <li id='nav-overview' class="active"><a data-toggle="pill" href="#overview">&Uuml;bersicht</a></li>
        <li id='nav-text'><a data-toggle="pill" href="#text">Text</a></li>
        <li id='nav-rules'><a data-toggle="pill" href="#rules">Regeln</a></li>
    </ul> 
            <div id="wrapper" class="panel-body m100">
            <div id='overview' class="tab-pane fade in active">
            Name: Elsor <br>
            Mitarbeiter: LukvonStrom tempralino&nbsp;Pop3y&nbsp;Chkarist&nbsp;M4st3mM4yh3m&nbsp;localhost2148&nbsp;Chrzi <br>
            <p id="id" style="margin-bottom: 1.3em; font-size: 14px; line-height: 21px;">
            <iframe src="https://map.die-bruderschaft.org?worldname=world&amp;mapname=surface2&amp;zoom=5&amp;x=1036&amp;y=64&amp;z=-517" width="500px" height="500px"></iframe></p>
            </div>
                <div id='text' class="tab-pane fade">
                <p> Elsor ist die Spawn und Hauptstadt des Servers </p><br>
                </div>
                <div id='rules' class="tab-pane fade">
                <p> Es sind 1 kostenloses und 1 gekauftes pro User maximal gestattet. Die Grundst&uuml;cksbegrenzung darf nur im Eingangsbereich abgebaut und nicht bebaut werden. Ausgenommen ist das Dach, welches &uuml;berlappen darf. Es ist der Baustil der Stadt zu &uuml;bernehmen und bei Abmahnung ist das Haus umgehend zu &auml;ndern Kostenlose Grundst&uuml;cke k&ouml;nnen einfach bebaut werden und m&uuml;ssen bei Auszug wieder in ihren vorherigen Zustand gebracht werden. Nicht kostenlose Grundst&uuml;cke k&ouml;nnen bei einem Teamler erworben werden. F&uuml;r Wohngemeinschaften fallen 500 Dz pro zus&auml;tzlichem Bewohner an. Ein Umzug ist nur m&ouml;glich auf ein gleich gro&szlig;es oder gr&ouml;&szlig;eres Grundst&uuml;ck und kostet die Differenz der Grundst&uuml;ckspreise zuz&uuml;glich 1000 Dz Umzugspauschale. Bei Inaktivit&auml;t ohne Abmeldung wird das Haus abgerissen (Gekaufte GS: 4 Wochen, Kostenlose GS: 2 Wochen). Bei Shops darf nur der Boden und die Zwischendecke ver&auml;ndert werden. Ver&auml;nderungen an der Au&szlig;enwand und des Daches sind verboten. Shops m&uuml;ssen bei einem Teamler erworben werden. Bei Inaktivit&auml;t ohne Abmeldung kommt es nach 4 Wochen zur Enteignung  </p><br>
                </div>
                <!-- <p> Bauevent am 25.03.2016 </p><br> -->
          </div>
        </div>
    </div>
</div>

感谢您回答这个问题，为我节省了大量时间:)

Answer 1

添加此 CSS

.panel.with-nav-tabs .panel-heading{
    padding: 5px 5px 0 5px;
}
/********************************************************************/
/*** PANEL DEFAULT ***/
.with-nav-tabs.panel-default .nav-tabs > li > a,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
    color: #777;
}
.with-nav-tabs.panel-default .nav-tabs > .open > a,
.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
    color: #777;
    background-color: #ddd;
    border-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.active > a,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
    color: #555;
    background-color: #fff;
    border-color: #ddd;
    border-bottom-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
    background-color: #f5f5f5;
    border-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
    color: #777;   
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
    background-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #555;
}

并且比 HTML 将是

<div>
<div class="col-md-6">
            <div class="panel with-nav-tabs panel-default">
                <div class="panel-heading">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab1default" data-toggle="tab">Default 1</a></li>
                            <li><a href="#tab2default" data-toggle="tab">Default 2</a></li>
                            <li><a href="#tab3default" data-toggle="tab">Default 3</a></li>
                            <li class="dropdown">
                                <a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#tab4default" data-toggle="tab">Default 4</a></li>
                                    <li><a href="#tab5default" data-toggle="tab">Default 5</a></li>
                                </ul>
                            </li>
                        </ul>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="tab1default">Default 1</div>
                        <div class="tab-pane fade" id="tab2default">Default 2</div>
                        <div class="tab-pane fade" id="tab3default">Default 3</div>
                        <div class="tab-pane fade" id="tab4default">Default 4</div>
                        <div class="tab-pane fade" id="tab5default">Default 5</div>
                    </div>
                </div>
            </div>
        </div>
</div>