1
私はthis codeと書いていますが、いくつかの問題と疑問があります。欄からの余白右
まず、ペンで見られるように、2番目のメニュー項目は「アクティブ」です。ペンで何らかの理由で、私はmy browserのコードを実行していないときは、灰色の背景があります。 それはなぜですか？また、ブラウザに背景がないことを確認するにはどうすればよいですか？
第二に、あなたがHTMLで見ることができるように私はcol-md-2とcol-md-10に列を設定していると私は理解して、col-md-2内のコンテンツがcol-md-10に1未満のスペースを持っていますが、合計で、彼らは全体にまで追加する必要がありますブラウザのウィンドウサイズ
col-md-10の内容は、hereのように、実際に存在するスペースよりも小さいかのように動作します。
HTML
<body>
<div class="container">
<div class="row">
<div class="col-md-2" >
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation" id = "verticalMenu">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav" id = "menuItems">
<li><a href="#">Menu Item 1</a></li>
<li class="active"><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-md-10" id = "myContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet rhoncus dui, vel tempor purus. Proin eu gravida elit. Donec nisi sapien, ultricies elementum justo in, ultricies semper nisi. </p>
</div>
</div>
</div>
</body>
CSS（ペンではありも余裕の私のブラウザに表示されていない左である）
/* make sidebar nav vertical */
@media (min-width: 768px)
{
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
.container
{
margin: 0px;
}
#myContent
{
margin-top: 25%;
}
#verticalMenu
{
margin-top: 50%;
background-color: transparent;
border: none;
}
#menuItems a
{
color: black;
}
#menuItems a:hover
{
color: red;
background-color: white;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover
{
background-color: transparent;
border-right: 3px solid black;
}
.navbar-default .navbar-nav>li>a
{
border-right: 3px solid red;
background-color: white;
text-align: right;
}
.navbar-default .navbar-toggle
{
border: 2px solid red;
border-color: red;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover
{
background-color: transparent;
}
ここに問題を示す最小限の関連コードを入力する必要があります。サードパーティのサイトは明日は消えて、今後誰も助けられません。 – Rob
あなたは正しいです、私はそれを追加しました。ありがとうございました –