0
何らかの理由で、私のナビゲーションバーは、自分のロゴが途中で崩壊してメニュー項目を横方向に表示します。私はvisible-xsなどを使用したとき、それが見えるとき何らかの理由で左に揃えます！ブートストラップ - 折りたたまれたメニュー項目が縦方向ではなく横方向に表示されます
私は、このようなリスト項目のインラインブロックを表示するなど、他の同様のオーバーフローの問題に見られる方法試してみました（インラインスタイルを使用するように望んでいないにも関わらずに！）
しかし、何も私のために働いていません！
デスクトップビューのメニュー項目の中央にロゴが表示されているため、標準メニューではありませんが、メニュー項目を垂直に表示する方法が必要です真ん中にロゴ？私はこれに新しかったのでおそらく私は愚かで何かを見逃していますか？
私はそれが可能ならば、ここで任意の差（それはこのメニューを破壊し、閉鎖されてからそれを防ぐことができるか）
は私が持っているもので、試してみましたjqueryの携帯電話を使用しています：ナビゲーションバーのための
HTMLを：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, no-index">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favv.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="../assets/js/main.js"></script>
<!-- Custom styles for this template -->
<link href="../node_modules/jquery-mobile/mobilestyles.css" rel="stylesheet">
<link href="/Silver-Lining/css/template.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]>
<!--============ Navigation ===============-->
<nav class="navbar navbar-default navbar-fixed-top text-center">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="top-social">
<a href="tel:+1-303-499-7111"> <i class="fa fa-phone" aria-hidden="true">
</i> 0787000000
</a>
<a href="#">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-linkedin-square" aria-hidden="true"></i>
</a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li><a href="about-us.php" data-ajax="false">ABOUT</a></li>
<li><a href="gallery.php" data-ajax="false">OUR CARS</a></li>
<li><a href="Prices.php" data-ajax="false">PRICES</a></li>
<a class="hidden-sm-down" href="index.php" data-ajax="false"><img src="../assets/images/logo" width="250" alt="Logo"></a>
<li><a href="#" data-ajax="false">PACKAGES</a></li>
<li><a href="gallery.php" data-ajax="false">BLOG</a></li>
<li><a href="contact.php" data-ajax="false">CONTACT</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
メニュー項目を作成するCSSの例では、崩壊に縦に表示されます。
@media (max-width: 932px) {
#navbar-primary .navbar-nav li a {
float: none;
position: inherit;
display: inline-block !important;
vertical-align: top;
max-height: 300px;
}
}
すべてのヘルプははるかに高く評価されるだろうCSSはナビゲーションバー
// Remove excess borders
.navbar-default {
border-top: none;
border-left: 0;
border-right: none;
margin-top: 0px;
padding-bottom: 10px;
font-family: 'Open Sans Condensed', sans-serif;
margin-bottom: 0;
font-size: 18px;
border-color: transparent;
white-space: normal;
}
.navbar-default .navbar-nav > li {
margin-top: 20px;
}
のために、私は少なくとも数日間は非常に混乱し、この上で立ち往生されていると、本当にすべての繰り返し
それを加えることなく、同じナビゲーションバーを維持したいしています
この原因は複数ある可能性があり、カスタム 'css'ファイルをインポートしたときに何が起きているのかを正確に伝えることができない場合があります。あなたが何らかの形でこの問題を 'snippet'や' fiddle'で複製したらうまくいけば助けてくれるでしょう。:) –
私はこのチュートリアルを使っていますが、これはソーシャルアイコンなどを追加したものです。https：// codepen .io/davidcochran/pen/Fkwys私はそれがjsのフィドルで正常に動作するように見えることができません – ck777
崩壊に気づいたメニュー項目は、私のように水平です - どんな助けや提案も大いに感謝！あなたがこれを正しく動作させるために追加する必要があるものでjsのバイブルを作ることができるなら、私はそれを実装できると確信しています！ありがとう、申し訳ありませんjsのフィドルを投稿していないために！ – ck777