0

最近Bootstrap（および一般的なフロントエンドのもの）を学び、1つの特定の問題で立ち往生しています。ページ幅全体に拡大縮小するナビゲーションバーがあり、ロゴが左に配置され、順序付けされていないリストの 5 つの項目が右に浮かんでいます。応答性が開始されない限り、うまく機能します。特定の最小/最大幅を入力したときに表示される一般的な動作 - リスト項目を互いの下に並べる - は素晴らしいですが、正しいフローティングは道のどこかで失われます. bootstrap-responsive.css をざっと調べていると、この動作の原因となっている行を見つけるのに苦労しました。私がどこを見始めるべきか誰かが知っていますか?

<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#"><img src="img/logo.png" alt="horizontal-ad"></a>
        <ul class="nav" style="float: right;">
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
        </ul>
    </div>
</div>

順序付けられていないリストのインライン スタイリングに加えて、私がオーバーライドする唯一のルールは、メインの bootstrap.css からの .navbar-inner で、色を調整します。

よろしく！

::編集:これはbootstrap-responsive.cssとは何の関係もないことに気付きました。削除したためですが、動作は同じままです。ただし、問題はまだ存在します。::

4

4 に答える 4

0

Boostrap ヘルパー クラスのプル ライトを試してください。

<ul class="nav pull-right">

またはブロックで表示しようとします：

 <ul style="display:block" class="nav pull-right">
于 2013-08-27T11:16:01.553 に答える
0

これを試して

<div class="navbar">
    <div class="navbar-inner clearfix">
        <a class="brand pull-left" href="#"><img src="img/logo.png" alt="horizontal-ad"></a>
        <ul class="nav pull-right">
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
        </ul>
    </div>
</div>
于 2013-08-27T11:16:41.703 に答える