タブコンテンツを含むCSSダッシュボードにより、メインエリアがナビゲーションの下に表示されます

アランボール

VS2012を使用して、ASP MVC4 / 5プロジェクトを取得しました。追加されたのはブートストラップ3.2です

Twitter Bootstrapのダッシュボードの例で問題が発生した他のいくつかの例を調べましたが、自分の問題の解決策を策定することができませんでした。

ダッシュボードがあり、tab-contentクラスとtab-panescssクラスを使用したさまざまなページを表示します。ただし、メインエリアはナビゲーションの右下になります。他の同様の質問は、最新のブートストラップにはない行流体について言及しました。また、CSSを変更して、提案されているさまざまな回答を試しました。

これが私のコードです:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#">Overview</a></li>
                <li><a href="#clients" data-toggle="tab">Clients</a></li>
                <li><a href="#orders" data-toggle="tab">Orders</a></li>
                <li><a href="#stock" data-toggle="tab">Stock</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main tab-content">
            <h1 class="page-header" style="margin-top: 0 !important;">Dashboard</h1>

            <div class="tab-pane" id="clients">
                @Html.Action( "Index", "Client")
            </div>
            <div class="tab-pane" id="orders">
                @Html.Action("Index", "Order")
            </div>
            <div class="tab-pane" id="stock">
                @Html.Action("Index", "Stock")
            </div>
        </div>
    </div>
</div>

おそらく私のcssが間違っているか、メインエリアにページをロードするための私の実装が間違っています。これを機能させるための回答/提案に感謝します。

私が試した他のこと:ターゲットアップデートとしてdivでajaxactionlinkを使用する

DaniP

すでにcol-*値を使用している場合は、offsetクラス名を使用する必要はありません

<div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
        ...
    </div>
    <div class="col-sm-9 col-md-10 main tab-content">
        ...
    </div>
</div>

このデモを確認してください

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

タブコンテンツを含むCSSダッシュボードにより、メインエリアがナビゲーションの下に表示されます

分類Dev

ナビゲーションタブのコンテンツボックスにクロスドメインHTMLコンテンツを表示する

分類Dev

CSSメニューのサブナビゲーションが折り畳みの下に表示されます

分類Dev

上部のナビゲーションメニューのドロップダウンはWebページのコンテンツの下に隠れており、さまざまな画面サイズでコンテンツの位置を修正したい

分類Dev

メニューが開くと、ナビゲーションバーがページのコンテンツの下に表示されます

分類Dev

コンテンツを位置の下にプッシュする:上部のナビゲーションを修正して表示されるようにする

分類Dev

ブートストラップナビゲーションバーの切り替えボタンにコンテンツが表示されない

分類Dev

折りたたまれたナビゲーションバーがコンテンツを下にプッシュするのを防ぎます

分類Dev

中央のアイテムメニューにアイコンのみを表示する以外に、下部のナビゲーションにアイコンとテキストを含むメニューアイテムを表示させるにはどうすればよいですか?

分類Dev

ナビゲーションバーのドロップダウンコンテンツをアニメーション(トランジションなど)で表示するにはどうすればよいですか?

分類Dev

anglejsのナビゲーションメニューをクリックするとコンテンツが表示されます

分類Dev

折りたたまれたナビゲーション-ホバー/クリックしたときに[サービス]ナビゲーションリンクの下にドロップダウンメニューを表示するにはどうすればよいですか?

分類Dev

タブバーコントローラーにナビゲーションコントローラーを埋め込むと、ビューコントローラーのセーフエリアが変更されます

分類Dev

cssで、メインコンテンツの上部マージンを拡張すると、固定された上部ナビゲーションセクションのマージンがメインコンテンツとともに低下します

分類Dev

サイドナビゲーションプライマリコンテンツエリア内のマット拡張パネル内にマットカードをレンダリングするにはどうすればよいですか?

分類Dev

フローティングアクションボタンがナビゲーションドロワーの上に表示されます

分類Dev

ビューにフローティングアクションボタンが含まれている場合にのみスナックバーが表示されている場合、Androidエスプレッソテストがフリーズします

分類Dev

スライドメニューナビゲーションをクリックすると、キーボードが断片的に非表示になります

分類Dev

レスポンシブナビゲーションメニューのドロップダウンボタンは、.appendTo()の後に壊れます

分類Dev

ナビゲーションが下から上にスライドすると、コンテンツが表示されます

分類Dev

ドロップダウンメニューのあるナビゲーションにアイコンを設定します(CSSのみ)

分類Dev

ナビゲーションコンポーネントを介してアクションに追加されたアニメーションが完了するまで、ビューがクリックされないようにします

分類Dev

修正方法:ポップアップメニューを開いたときにナビゲーションバーのアイコンが表示されたままになる(フルスクリーン-没入型スティッキー)

分類Dev

フレックスボックスナビゲーションにdivを追加して、押し下げるのではなく、下のコンテンツの上に表示されるようにします

分類Dev

ボタンがクリックされたときにナビゲーションドロワーアクティビティを開始します

分類Dev

現在のCSSレスポンシブドロップダウンナビゲーションメニューを展開するにはどうすればよいですか?ドロップダウンが期待どおりに機能しない

分類Dev

固定フレックスボックスナビゲーションメニューの下にスクロール可能なコンテンツを配置する

分類Dev

他のすべてのコンテンツを含むコンテナよりも幅が広いヘッダー/ナビゲーションを中央に配置する

分類Dev

SwiftUI-ボタンの押下とナビゲーションに関するエラーメッセージを含むフォーム

Related 関連記事

  1. 1

    タブコンテンツを含むCSSダッシュボードにより、メインエリアがナビゲーションの下に表示されます

  2. 2

    ナビゲーションタブのコンテンツボックスにクロスドメインHTMLコンテンツを表示する

  3. 3

    CSSメニューのサブナビゲーションが折り畳みの下に表示されます

  4. 4

    上部のナビゲーションメニューのドロップダウンはWebページのコンテンツの下に隠れており、さまざまな画面サイズでコンテンツの位置を修正したい

  5. 5

    メニューが開くと、ナビゲーションバーがページのコンテンツの下に表示されます

  6. 6

    コンテンツを位置の下にプッシュする:上部のナビゲーションを修正して表示されるようにする

  7. 7

    ブートストラップナビゲーションバーの切り替えボタンにコンテンツが表示されない

  8. 8

    折りたたまれたナビゲーションバーがコンテンツを下にプッシュするのを防ぎます

  9. 9

    中央のアイテムメニューにアイコンのみを表示する以外に、下部のナビゲーションにアイコンとテキストを含むメニューアイテムを表示させるにはどうすればよいですか?

  10. 10

    ナビゲーションバーのドロップダウンコンテンツをアニメーション(トランジションなど)で表示するにはどうすればよいですか?

  11. 11

    anglejsのナビゲーションメニューをクリックするとコンテンツが表示されます

  12. 12

    折りたたまれたナビゲーション-ホバー/クリックしたときに[サービス]ナビゲーションリンクの下にドロップダウンメニューを表示するにはどうすればよいですか?

  13. 13

    タブバーコントローラーにナビゲーションコントローラーを埋め込むと、ビューコントローラーのセーフエリアが変更されます

  14. 14

    cssで、メインコンテンツの上部マージンを拡張すると、固定された上部ナビゲーションセクションのマージンがメインコンテンツとともに低下します

  15. 15

    サイドナビゲーションプライマリコンテンツエリア内のマット拡張パネル内にマットカードをレンダリングするにはどうすればよいですか?

  16. 16

    フローティングアクションボタンがナビゲーションドロワーの上に表示されます

  17. 17

    ビューにフローティングアクションボタンが含まれている場合にのみスナックバーが表示されている場合、Androidエスプレッソテストがフリーズします

  18. 18

    スライドメニューナビゲーションをクリックすると、キーボードが断片的に非表示になります

  19. 19

    レスポンシブナビゲーションメニューのドロップダウンボタンは、.appendTo()の後に壊れます

  20. 20

    ナビゲーションが下から上にスライドすると、コンテンツが表示されます

  21. 21

    ドロップダウンメニューのあるナビゲーションにアイコンを設定します(CSSのみ)

  22. 22

    ナビゲーションコンポーネントを介してアクションに追加されたアニメーションが完了するまで、ビューがクリックされないようにします

  23. 23

    修正方法:ポップアップメニューを開いたときにナビゲーションバーのアイコンが表示されたままになる(フルスクリーン-没入型スティッキー)

  24. 24

    フレックスボックスナビゲーションにdivを追加して、押し下げるのではなく、下のコンテンツの上に表示されるようにします

  25. 25

    ボタンがクリックされたときにナビゲーションドロワーアクティビティを開始します

  26. 26

    現在のCSSレスポンシブドロップダウンナビゲーションメニューを展開するにはどうすればよいですか?ドロップダウンが期待どおりに機能しない

  27. 27

    固定フレックスボックスナビゲーションメニューの下にスクロール可能なコンテンツを配置する

  28. 28

    他のすべてのコンテンツを含むコンテナよりも幅が広いヘッダー/ナビゲーションを中央に配置する

  29. 29

    SwiftUI-ボタンの押下とナビゲーションに関するエラーメッセージを含むフォーム

ホットタグ

アーカイブ