0
ナビゲーションバーは上部から一定の距離を置いています。ナビゲーションバーをスクロールした後、上部に固定されますが、残念ながら幅はコンテナを超えて広がりますに定義されている）。ナビゲーションバーは元の幅を保持する必要がありますが、どうすれば解決できますか？ここに私のgithubのリンクがあまりにもだ： - https://github.com/Archiie/MyPortfolioナビゲーションバーは上部に貼り付けた後に幅を変更します
.affix {
\t top: 0px;
\t margin: 0px 20px;
}
.affix + .container {
\t padding: 5px;
}
h1, h4 {
\t text-shadow: 4px 5px 3px #A866B2; /*#DCD4F9, #F74554 moves to the right, moves down, thickness of text's shadow*/
}
.main-container {
\t margin: 40px 0px;
\t border-radius: 10px;
\t background-color: #4B004C ; /*#800000, #4B004C, #E6E6E6*/
}
#head_tag, #footer_tag {
\t font-family: Tangerine, Monospace;
\t color: white;
}
#head_tag {
\t font-size: 100px;
\t height: 300px;
}
#footer_tag {
\t font-size: 50px;
}
.image {
\t border-style: solid;
\t border-radius: 50%;
\t border-width: 1px;
\t border-color: #000;
\t height: 230px;
\t width: 240px;
}
.img-responsive {
\t margin: 20px auto;
}
.navbar {
\t margin: 0px 20px;
\t z-index: 1;
}
.info {
\t font-family: Monospace;
\t font-size: 20px;
\t background-color: #E6E6E6; /*#4B004C, #E6E6E6*/
\t border-radius: 10px;
\t margin: 20px 20px;
\t padding: 20px 20px;
}
.boxSpacing {
\t margin: 20px auto;
}
.pics {
\t height: 300px;
\t width: 300px;
}
#aboutMe, #portfolio, #contactMe {
\t font-family: Lobster, Monospace;
\t font-size: 35px;
\t color: #6E326F;
}
.centeringIcon {
\t display: block;
\t text-align:center;
\t color: white;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Portfolio</title>
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
\t \t <link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css">
\t \t <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
\t \t <link rel="stylesheet" type="text/css" href="style.css">
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
\t \t </script>
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
\t \t </script>
\t </head>
\t <body data-spy="scroll" data-target=".navbar" data-offset="10">
\t \t <div class="container main-container">
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-8">
\t \t \t \t \t <h1 class="text-center" id="head_tag">Archita's Portfolio</h1>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-4">
\t \t \t \t \t <img src="images/Archi.jpg" class="img-responsive image">
\t \t \t \t </div>
\t \t \t </div>
\t \t \t \t \t
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-12">
\t \t \t \t \t <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="365">
\t \t \t \t \t \t <div class="container">
\t \t \t \t \t \t \t <div class="navbar-header">
\t \t \t \t \t \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
\t \t \t \t \t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t \t \t \t </button>
\t \t \t \t \t \t \t \t <div class="collapse navbar-collapse" id="myNavbar"> <!-- This navigation bar should not change it's width even after scrolling past it-->
\t \t \t \t \t \t \t \t \t <ul class="nav navbar-nav">
\t \t \t \t \t \t \t \t \t \t <li><a href="#aboutMe">About Me</a></li>
\t \t \t \t \t \t \t \t \t \t <li><a href="#portfolio">Portfolio</a></li>
\t \t \t \t \t \t \t \t \t \t <li><a href="#contactMe">Contact</a></li>
\t \t \t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </nav>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-12">
\t \t \t \t \t <div class="info">
\t \t \t \t \t \t <h3 class="text-center" id="aboutMe">About Me</h3>
\t \t \t \t \t \t <p>I'm a new-bee in front-end technology. I used to work on ROR, R and Python but now I'm exploring HTML, CSS, Bootstrap, jQuery, JavaScript, AngularJS and ReactJS.</p>
\t \t \t \t \t \t <p>I've also worked on several <span style="color:#960099">android projects </span>as well. I've also worked on highcharts and D3.</p>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="info">
\t \t \t \t \t \t <h3 class="text-center" id="portfolio">Portfolio</h3>
\t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t \t <div class="col-md-6 boxSpacing">
\t \t \t \t \t \t \t \t <img src="images/Project_1.png" class="img-responsive pics">
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-md-6 boxSpacing">
\t \t \t \t \t \t \t \t <img src="images/Project_1.png" class="img-responsive pics">
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-md-6 boxSpacing">
\t \t \t \t \t \t \t \t <img src="images/Project_1.png" class="img-responsive pics">
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-md-6 boxSpacing">
\t \t \t \t \t \t \t \t <img src="images/Project_1.png" class="img-responsive pics">
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="info">
\t \t \t \t \t \t <h3 class="text-center" id="contactMe">Contact</h3>
\t \t \t \t \t \t <p><b>Here's my contact details:</b></p>
\t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t <li>Name:- Archita Sundaray</li>
\t \t \t \t \t \t \t <li>Phone no.:- +91 89514 88208</li>
\t \t \t \t \t \t \t <li>email address:- [email protected]</li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-8">
\t \t \t \t \t <h4 class="text-center" id="footer_tag">~ made by Archita Sundaray</h4>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-1 img-responsive">
\t \t \t \t \t <a href="https://www.linkedin.com/in/archita-sundaray-b7240977/" target="_blank"><i class="fa fa-linkedin centeringIcon"></i></a>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-1 img-responsive">
\t \t \t \t \t <a href="https://github.com/Archiie" target="_blank"><i class="fa fa-github centeringIcon"></i></a>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-1 img-responsive">
\t \t \t \t \t <a href="https://twitter.com/Archi055" target="_blank"><i class="fa fa-twitter centeringIcon"></i></a>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-1 img-responsive">
\t \t \t \t \t <a href="https://bitbucket.org/Archiie/" target="_blank"><i class="fa fa-bitbucket centeringIcon"></i></a>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </body>
</html>
これは、「デバイスの変更上のレイアウトを破りますsの幅。私は、デバイスの画面に反応するソリューションを求めています。 –
すべての画面の作業を確認してください – Gattbha
ありがとう、それは動作します:) –