ブートストラップナビゲーションアイコンが画面外に消える

少しの助けを望んでいた。私のブートストラップナビゲーションが画面の右側から実行されていますか？私は固定した左右両側に空白がありましたが、今は 'ヘルプ'リンクが途切れています。助言がありますか？ブートストラップナビゲーションアイコンが画面外に消える

index.htmlを

<div id="header"> 
<!--CSS deals with header image--> 
</div> 
    <h1>Hands on Sports & Holistic Therapy</h1> 

<!--navbar--> 
<nav class="navbar navbar-default navbar-fixed-top"> 
<div class="container-fluid"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data- 
toggle="collapse" data-target="#navbar" aria-expanded="false" aria- 
controls="navbar"> 
    <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 id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="index.html">Home<span class="sr-only">(current) 
</span></a></li> 
      <li><a href="treatments.html">Treatments</a></li> 
      <li><a href="bookings.html">Bookings</a></li> 
      <li><a href="shop.html">Shop</a></li> 
      </ul> 

    <ul class="nav navbar-nav navbar-right"> 
    <li><a href="login.html">Log In</a></li> 
    <li><a href="checkout.html">Basket<span class="badge">5</span></a></li> 
     <li><a href="account.html"></a></li> 
    <li><a href="contact.html">Contact</a></li> 
    <li><a href="help.html">Help</a></li> 
     </ul> 
    </div> 
</div> 
</nav> 
</head> 
<body>

cssgeneric.css

#header{ 
background:url('banner5.jpg') no-repeat top center; 
background-size: 95%; 
width: 100%; 
height: 200px; 
margin-top: 50px; 
} 
#navbar{ 
background-color: #ccb69b; 
margin-left:-20px; 
margin-right:-15px; 
}`

出典

2017-03-08 Anniee

コードをクリーンアップして、問題を示す最小限の例にすることもできます。 – ZimSystem

申し訳ありません - コードをきれいにしました - 何かに影響があったかどうかはわかりませんでした。 – Anniee

私はCSSルールで見ることができる、と私は問題であることも可能だと思います。

@media (min-width: 768px) 
    navbar.less:380 
    .navbar-right { 
    float: right!important; 
    margin-right: -15px; 
}

margin-right：-15px;考えられる問題です。このルールは、ブートストラップフォルダ内のnavbar.lessにあります。

あなたのCSSGeneric.cssで私は新しいルールを変更して追加します。

/*line 76*/ 
#navbar{ 
    background-color: #ccb69b; 
    margin-left:-20px; 
    margin-right:-15px; 
} 
ul.nav.navbar-nav.navbar-right { 
    margin-right: 0px; 
}

navbar.lessの問題を解決するためにul.nav.navbar-nav.navbar-rightを追加しました。

私はその助けを願っています。

良い一日です。

出典

2017-03-08 14:30:02

優秀、それはそれを固定しました、ありがとう！ – Anniee

ブートストラップナビゲーションアイコンが画面外に消える

答えて

関連する問題