0
個人用のポートフォリオWebサイト用のナビゲーションバーをコーディングしていて、コンピュータ画面ではうまく見えますが、モバイルデバイスで開くと、ちょうど一般的にラインから外れて、どのように私はすべてのデバイス上で素敵に見えるようにすることができますか？私はコーディングにかなり新しいので、どんな助けもありがとう！他のデバイスを使用しているときに、ブートストラップのナビゲーションバーが反応しないようにします。
https://codepen.io/Bowdoo95/pen/PJzZVp
あなたは、ブートストラップのナビゲーションバーを使用して、それを上書きしようとしているHTML
<div class="container-fluid">
<div class="row">
<nav id="nav" class="navbar navbar-default navbar-fixed-top">
<div class="col-md-3 col-sm-3">
<a id="name" href="#"><b>Joseph Bowditch</b></h5></a>
</div>
<div class="col-md-7 col-sm-7">
<ul id="menu-items" class="nav navbar-nav navbar-right">
<li class="active"><a class="home" href="#page-one"><b>Home</b></a></li>
<li><a class="portfolio" href="#page-two"><b>Portfolio</b></a></li>
<li><a class="about-me" href="#page-three"><b>About Me</b></a></li>
</ul>
</div>
<div class="col-md-2 col-sm-2">
<a href="#page-four" id="contact-me" class="btn navbar-btn" role="button"><b>Contact Me</b></a>
</div>
</nav>
</div>
</div>
CSS
#name{
color:#FFF;
float:left;
padding-top:5%;
}
#nav{
background-color: transparent;
border-color:transparent;
margin: 0px;
border-radius: 0px;
text-transform: uppercase;
}
.navbar-default .navbar-nav > li > a{
color:#FFF;
padding-top:18px;
}
.navbar-btn{
border: 3px solid #FFF;
text-transform:uppercase;
background-color:transparent;
color:#FFF;
float:right;
}
#menu-items{
margin-right:-100px !important;
}