0

ブートストラップ ナビゲーション ピルがモバイル ビューで占有するスペースを少なくしようとしています。デフォルトでは、互いに重なり合っています。これは、多くのスペースをすばやく使用します。私が達成しようとしているのは、1 行に 2 つの錠剤を取得することです。これまでのところ、アクティブなクラスを除いてすべてが機能しています。ピルをクリックするとアクティブになりますが、アクティブなクラスが以前のアクティブなピルから離れることはありません。

私が使用しているhtmlは次のとおりです。

<ul class="nav nav-pills nav-justified" role="tablist">
   <div class="row">
      <div class="col-xs-6">
        <li role="presentation" class="active"><a href="#club" aria-controls="home" role="tab" data-toggle="tab">The Club</a></li>
        <li role="presentation"><a href="#mens" aria-controls="profile" role="tab" data-toggle="tab">Men's Captains</a></li>
        <li role="presentation"><a href="#womens" aria-controls="messages" role="tab" data-toggle="tab">Ladies' Captains</a></li>
      </div>
      <div class="col-xs-6">
        <li role="presentation"><a href="#stash" aria-controls="settings" role="tab" data-toggle="tab">Stash Captain's</a></li>
        <li role="presentation"><a href="#socialsecs" aria-controls="settings" role="tab" data-toggle="tab">Social Sec's</a></li>
        <li role="presentation"><a href="#experiance" aria-controls="settings" role="tab" data-toggle="tab">Hockey Experience</a></li>
      </div>
   </div
</ul>

>スタイリングが確実に機能するように、ピルに関連する CSS からを削除する必要がありました。li が ul の直後にないためです。それはすべて良いことです。

.nav li a {
 position: relative;
 display: block;
 padding: 10px 15px;
}
.nav li a:hover,
.nav li a:focus {
 text-decoration: none;
 background-color: #eee;
}
.nav li.disabled a {
 color: #777;
}
.nav-pills li {
 float: left;
}
.nav-pills li a {
 border-radius: 4px;
}
.nav-pills li + li {
 margin-left: 2px;
}
.nav-pills li.active a,
.nav-pills li.active a:hover,
.nav-pills li.active a:focus {
 color: #fff;
 background-color: #337ab7;
}
.nav-justified {
 width: 100%;
}
.nav-justified li {
 float: none;
}
.nav-justified li a {
 margin-bottom: 5px;
 text-align: center;
}
.nav-justified .dropdown .dropdown-menu {
 top: auto;
 left: auto;
}

私が考えることができる私の唯一の問題は、アクティブなトグルが機能するときに、おそらく<div class="row">...</div>と<div class="col-xs-6">...</div>がbootstrap.jsファイルで邪魔になっていることです。

しかし..おそらくおわかりのように、私はJavaScriptの専門家ではないので、これが可能かどうかを判断するために助けが必要です.

ありがとう

ロブ

4

2 に答える 2

1

CSS と HTML のみを使用してこれを行うことができます。問題は、nav li 内にネストされた行と col-xs-6 div を追加することです。li 要素は、その直接の子として ul/ol タグを期待します - Bootstrap は確かにそうします。

問題を解決する方法は、ul 内の余分な div を削除してから、li で display: inline-block を使用し、幅を 49% に設定することです。何らかの理由で、2 つの要素を同じ行に保持するには、50% 未満にする必要があります。

変更後の HTML コードは次のとおりです。

<ul class="nav nav-pills nav-justified" role="tablist">
    <li role="presentation" class="active"><a href="#club" aria-controls="home" role="tab" data-toggle="tab">The Club</a></li>
    <li role="presentation"><a href="#mens" aria-controls="profile" role="tab" data-toggle="tab">Men's Captains</a></li>
    <li role="presentation"><a href="#womens" aria-controls="messages" role="tab" data-toggle="tab">Ladies' Captains</a></li>
    <li role="presentation"><a href="#stash" aria-controls="settings" role="tab" data-toggle="tab">Stash Captain's</a></li>
    <li role="presentation"><a href="#socialsecs" aria-controls="settings" role="tab" data-toggle="tab">Social Sec's</a></li>
    <li role="presentation"><a href="#experiance" aria-controls="settings" role="tab" data-toggle="tab">Hockey Experience</a></li>
</ul>

そして、ここにキーCSSがあります：

.nav-justified li {
   width: 49%;
   display: inline-block;
}
于 2016-01-14T02:26:21.930 に答える
0

これでできるはずです！

$(function(){
  $('li[role="presentation"]').on('click', function(e){
    $('ul[role="tablist"] li').removeClass('active');
    $(this).addClass('active');
  })
})

JSFiddle

于 2016-01-14T01:53:26.990 に答える