メニューのピクセルを修正しました

Question

私はbootstrap3を使ってメニューをデザインしています。それは写真のように見えるはずです。しかし、私はそのようなメニューを作ることができません。 1つを作成しようとしましたが、私のデザインへのリンクはhttps://codepen.io/irshad437/pen/EyQLVvです。

以下にコードを示します。 しかし、あなたがCodepen.io上でそれを確認する必要があります（ここでは見ていないGOOD）

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">MyGrade <span class="circle-txt">Up</span></a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">HOME</a></li> 
     <hr class="vertical" /> 
     <li><a href="#">EXPLORE</a></li> 
     </ul> 
     <form class="navbar-form navbar-right" role="search"> 
     <button type="submit" class="btn btn-default btn-rnd">Create Portfolio</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Anonymous <br />0 pts</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <img class="img-circle nav-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/677716/profile/profile-80_1.jpg" alt="?" class="img-round"/> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

.btn-rnd{ 
    border-radius:10px; 
} 

.navbar-nav li{ 
    margin-left:20px; 
    margin-right:20px; 
} 

.nav-img{ 
    width:40px; 
    height:40px; 
} 

.vertical{ 
    position:absolute; 
    width:1px; 
    height:25px; 
    color: black; 
    background-color:black; 
    display:inline-block; 
} 

.padding-8{ 
    padding-top:8px; 
} 

.img-circle{ 
    border: 1px solid black; 
} 

.circle-txt{ 
    height: 40px; 
    width: 40px; 
    display: inline-block; 
    text-align: center; 
    vertical-align: -10px; 
    padding-top:8px; 
    border-radius: 50%; 
    background: white; 
    border-style:solid; 
    border-width:1px; 
} 

問題：私は、ピクセルを修正することができません設計上の正しい位置。

Answer 1

これは正常に動作する必要がありますが、ここでは修正され、見てください。

https://codepen.io/anon/pen/QEmZWR

HTML：

<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">MyGrade <span class="circle-txt">Up</span></a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">HOME</a></li> 
 
     <hr class="vertical" /> 
 
     <li><a href="#">EXPLORE</a></li> 
 
     </ul> 
 
     <form class="navbar-form navbar-right" role="search"> 
 
     <button type="submit" class="btn btn-default btn-rnd">Create Portfolio</button> 
 
     </form> 
 
     <ul class="annon nav navbar-nav navbar-right"> 
 
     <li><a href="#">Anonymous <br />0 pts</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <img class="img-circle nav-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/677716/profile/profile-80_1.jpg" alt="?" class="img-round"/> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav>

CSS：

.btn-rnd{ 
 
    border-radius:10px; 
 
} 
 

 
.navbar-nav li{ 
 
    margin-left:20px; 
 
    margin-right:20px; 
 
} 
 

 
.nav-img{ 
 
    width:40px; 
 
    height:40px; 
 
} 
 

 
.vertical{ 
 
    position:absolute; 
 
    width:1px; 
 
    height:25px; 
 
    color: black; 
 
    background-color:black; 
 
    display:inline-block; 
 
} 
 

 
.padding-8{ 
 
    padding-top:8px; 
 
} 
 

 
.img-circle{ 
 
    border: 1px solid black; 
 
} 
 

 
.circle-txt{ 
 
    height: 40px; 
 
    width: 40px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    padding-top:8px; 
 
    border-radius: 50%; 
 
    background: white; 
 
    border-style:solid; 
 
    border-width:1px; 
 
} 
 

 
a{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.navbar-nav li{ 
 
    margin-top:10px; 
 
} 
 

 
.navbar-form .btn{ 
 
    margin-top:10px; 
 
} 
 

 
.annon li{ 
 
    margin:0px; 
 
} 
 
.navbar-nav .img-circle{ 
 
    padding:0xp; 
 
    margin-top:13px; 
 
}