5

モーダルとそのモーダルにナビゲーション タブを作成しました。2 つの問題があります。

  • まず、これらのタブの高さが非常に大きいため、高さを少し小さく設定したい.cssの高さプロパティを使用して高さを設定しようとしましたが、うまくいきません.

  • 私の2番目の問題は、特定のタブが開いているときに、そのタブの下部に表示されているborder-bottom/行が通常どおり非表示にならないことです。

ですから、上記の問題を解決するために誰か助けてください。
タブ付きのモーダルの画像は次のとおりです。 ここに画像の説明を入力

これらのタブのコードは次のとおりです(不要なコードは避けています)。

<div class="tabbable" >
    <ul class="nav nav-tabs" ><!--tabs-->
          <li  style="position:absolute;margin-left:0px;height:50px;" id="logintab">
               <a href="#pane_login" data-toggle="tab" id="logintab_a">Login</a></li>
          <li  class="active" style="margin-left:70px;" id="reg_tab" >
              <a href="#pane_reg" data-toggle="tab" id="regtab_a">Registration</a></li>
    </ul>
    <div class="tab-content"><!--login tab content-->
        <div id="pane_login" class="tab-pane active">
        </div>
     </div>

     <div class="tab-content"><!--login tab content-->
        <div id="pane_register" class="tab-pane active">
        </div>
     </div>
</div><!--/Tabbable-->
4

3 に答える 3

0

@Rohan Kumar のデモを行っています。

CSS の変更のみ: 次のようにする必要があります。

最初の問題: フルボーダーを使用しているかのように、下のコンテンツの背景として border-bottom を設定する必要があります

li.active {
    border-bottom:1px solid white;
}

2 番目の問題: 高さを定義して @Rohan Kumar として行うか、必要に応じてマージンとパディングを 0 に設定して、上下のパディング値を増やすことができます。

デモ

于 2013-10-31T05:40:24.323 に答える