センター画面サイズが縮小され、ボタンが押された後で、ナビゲーションバーを調整します。

私はHTML/CSSを初めて使用しました。私は上部に反応的なナビゲーションバーを備えたWebページを作成しています。私が直面している問題は、navbarが折りたたまれてボタンが押されたときに、開かれたナビゲーションメニューの左側にnavbar-itemsが整列していることです。アイテムをメニューの中央に揃えたい。 SOとW3schoolsで検索しましたが、私の問題を解決できませんでした。ここでセンター画面サイズが縮小され、ボタンが押された後で、ナビゲーションバーを調整します。

は私のHTMLコードは、私が使用しています：

<html> 
<head> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="CSS/stylesheet.css"> 
    <title> 
    My Personal Portfolio 
    </title> 
</head> 
<body> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"><strong>Vatsal Sura</strong></a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav nav-pills navbar-nav navbar-right"> 
      <li class="nav-item active"><a class="nav-link" href="#">ABOUT</a></li> 
      <li class="nav-item "><a class="nav-link" href="#">MY PORTFOLIO</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">CONTACT ME</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
</body> 
</html>

をここではそれが最初の大画面にロードされているWebページの画像は、次のとおりです。

そして、ここにブラウザが最小化され、ナビゲーションバーが折りたたまれているときの別の画像です。

ボタンをクリックすると、元のものの下にナビゲーションバーが開き、アイテムは左側に揃えられますが、ナビゲーションバーの中央に揃えたいとします。

P.S.：ここでは、nav-itemsが折りたたまれていないときに最初に右揃えにしたいが、折りたたまれたときに中央に配置したい。どんな助けもありがとう。ありがとうございました。

出典

2016-08-07 VatsalSura

あなたのコードから、私が見るあなたが必要とするすべての-ALIGNをテキストにある：センター;メディアクエリで何がうまくいかない？ –

折りたたまれたアイテムにどのクラスが適用されているかを確認し、適用される追加のクラスに対して 'text-align：center;'を設定します。 – Vandesh

@MadalinaTainaどうすれば実現できますか？私はそれが本当に新しいので、私は何をすべきか分からない。あなたは私にそのことを教えてもらえますか？ – VatsalSura

することができますが

.navbar-collapse.collapse.in ul{ 
    text-align: center; 
}

.inクラスは、ブートストラップによって追加され、NAVをアン崩壊：以下のCSSを追加してみてくださいigation。また、liがinlineまたはinline-blockと表示されていることを確認してください。

EDIT 1：ul

.navbar-collapse.collapse.in ul.nav{ 
    text-align: center !important; // Try to remove the important part. 
}

で私は推測し、その理由は、navbar-rightクラスのは、あなたはまた、クラスが正しいとスタイルがoveridenかいないされているかどうかを確認するために開発ツールをチェックすることはできますか？

編集2：

あなたのCSSにこれを追加します。

.navbar-collapse.collapse.in ul{ 
    text-align: center; 
    vertical-align: middle; 
} 
.nav-pills>li { 
    float: none; 
    display: inline-block; 
}

出典

2016-08-07 12:49:53 ankitjain11

Nope。うまくいきませんでした。同じ結果。 – VatsalSura

あなたはフィドルをすることができますか？ – ankitjain11

[こちら]（https://jsfiddle.net/64wfmvc8/1/#&togetherjs=41LC22trFw） – VatsalSura

あなたはあなたのウェブサイトが完全に反応するようにしたい場合は、あなたがさまざまな画面サイズごとに異なるCSSルールを記述する必要があります...

/* Smartphones (portrait and landscape) ----------- */ 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 

@media only screen and (min-width : 321px) { 
/* Styles */ 
} 


/* iPads (landscape) ----------- */ 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 

@media only screen and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
/* Styles */ 
}

は、より多くの情報については、この質問を参照してください：CSS media queries for screen sizes

出典

2016-08-07 12:48:18

センター画面サイズが縮小され、ボタンが押された後で、ナビゲーションバーを調整します。

答えて

関連する問題