0

私はTwitterブートストラップを使用しており、メニューは現在次のように表示されます。 メニュー これは完璧ですが、モバイルビューでメニューを次のように表示する必要があります。 ここに画像の説明を入力してください

これで、メディアクエリなどを使用する必要があることがわかりました。これは問題ではありません。問題は、CSSで、行などを使用してメニューをそのようにスタイル設定する方法です。

HTMLは次のとおりです。

<!--SUBMENU-->
<div class="row-fluid">
   <div class="span12 submenu">
       <ul class="nav menu nav-pills">
            <li class="item-109"><a href="/stradix/index.php/company-profile" >Company Profile</a></li>
            <li class="item-108"><a href="/stradix/index.php/due-diligence" >Due Diligence</a></li>
            <li class="item-110"><a href="/stradix/index.php/our-solution" >Our Solution</a></li>
            <li class="item-111"><a href="/stradix/index.php/loan-process" >Loan Process</a></li>
            <li class="item-112"><a href="/stradix/index.php/currency-converter" >Currency Converter</a></li>
            <li class="item-113"><a href="/stradix/index.php/loan-calculator" >Loan Calculator</a></li>
            <li class="item-114"><a href="/stradix/index.php/news" >News</a></li>
            <li class="item-115"><a href="/stradix/index.php/important-downloads" >Downloads</a></li>
        </ul>
    </div>
</div>
<!--SUBMENU-->

およびデフォルトのブートストラップをオーバーライドするCSS：

.submenu .nav-pills > li > a {
    font-size:1.25em; 
    padding:0; 
    margin:2em 0.9em 0 0;
    padding: 0 0.9em 0 0;
    color:#6D6E70; 
    border-right:1px solid #A7A9AB;
    border-radius:0;
}
.submenu .nav-pills a:hover {
    background:none;
    color:#00ADEE;
}
.submenu .nav-pills > .active > a {
    background:none;
    color:#00ADEE;
}

.submenu .nav-pills > li:last-child > a {
        border-right:none;
        padding: 0;
        margin-right:0;
}

JSFIDDLEに投稿しますが、金曜日からまだjsfiddleに接続できません。

どんな助けでも大歓迎です..ありがとう。

4

1 に答える 1

0

あなたは望ましい効果を達成するためにこのようなことをすることができます

@media (max-width: 480px) { 

 .nav-pills > li {
float: left;
width: 50%;
 }
}

例については、私のJSFiddleをチェックし てください

于 2013-03-24T14:36:43.810 に答える