Q&A
jQueryに問題があるなら jQuery コードを削除すればローカルと同じ表示になるはずですが、どうなるでしょうか。あと、コードは markdown で書くと他の人にとって読みやすいと思います。 https://teratail.com/help
bootstrapで作成したサイトをロリポップにアップロードしたのですが、ローカルサーバーで動かしたときとレイアウトが違います。ドロップダウンメニューなどが正常に動いていないのでjsかj queryに問題があると思うのですが..プログラミング初心者のため解決策がわかりません。
以下がindex.htmlのソースコードです。
</head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-header">@media screen and (max-width: 480px) { header.jumbotron .container p { font-size: 16px; } } header .container { margin-top: 8%; } header .midashi-btn { border: 1px solid #fff; color: #fff; border-radius: 0; } header .midashi-btn:hover { color: #0089ff; border-color: #0089ff; } .navbar-form { padding-right: 30px; } .main-content .content-area { padding: 20px 15px; } .sidebar aside { background: #f0f0f0; padding: 20px; margin-bottom: 20px; } footer { text-align: center; padding: 10px; background: #101010; } </style>
</body> </html><!--ブランド名 ロゴ名の表示--> <a class="navbar-brand" href="#"></a> <!--トグルボタンの設置--> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-content"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="nav-content" class="collapse navbar-collapse"> <!--リンクのリスト メニューリスト--> <ul class="nav navbar-nav"> <li><a href="oubo.html></a></li> <li><a href="concept.html"></a></li> <!--ドロップダウン化するliタグ--> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" href="">Drop <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a>準備中</a></li> <li><a>準備中</a></li> <li><a>準備中</a></li> <li class="divider"></li> <li><a>準備中</a></li> <li class="divider"></li> <li><a>準備中</a></li> </ul> </li> </ul> <!--検索フォーム--> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </nav> <!-- Main jumbotron for a primary marketing message or call to action --> <header class="jumbotron"> <div class="container"> <h1>Arty</h1> <p>Find Models</p><p>Take a Camera</p> <p><a href="models.html "class="btn btn-lg midashi-btn" role="button"> »</a></p> </div> </header> <!--メインエリアを追加--> <div class="container main-content"> <div class="row"> <div class="col-md-9 content-area"> <h2></h2> <img class="img" src="background url(imgchain-232930.jpg).jpg"> <img class="img1" src="background url(imgchain-232930.jpg).jpg"> <img class="img2" src="background url(imgchain-232930.jpg).jpg"> </div><!--/.content-area--> <div class="col-md-3 sidebar"> <aside> <h4>News</h4> <ul class="list-unstyled"> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> </ul> </aside> <aside> <h4>Twitter</h4> <ul class="list-unstyled"> <li><a href="">記事のタイトルタイトル</a></li> <li><a href="">記事のタイトルタイトル</a></li> <li><a href="">記事のタイトルタイトル</a></li> <li><a href="">記事のタイトルタイトル</a></li> <li><a href="">記事のタイトルタイトル</a></li> </ul> </aside> </div><!--/.sidebar--> </div> </div><!--/.main-content--> <!--フッターを追加--> <footer class="container-fluid"> <small><a href="/">Copyright (C) 2013-2014 9ineBB All Rights Reserved.</a></small> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>
回答1件
0
レイアウトが違うというのはjQueryが機能していないということでしょうか？
であれば、よくあるのがパスが違うというのが原因だと思います。
投稿2015/11/24 14:20
総合スコア590
あなたの回答
tips
プレビュー
