0
navbarを画面の左側に配置すると、sidebarに残りのページコンテンツが右側に表示されます。Navbarがブートストラップカラムの幅よりも広くなっています
現在、私はそうのように、ブートストラップの列を使用して2つにページを分割しようとしています
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
/********************************************
* *
* *
* WRAPPERS *
* *
* *
********************************************/
#sidebarWrapper {
height: 100%;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
background-color: red;
overflow-x: hidden;
overflow-y: auto;
transition: all 0.5s ease;
}
/********************************************
* *
* *
* SIDEBAR NAV STYLE *
* *
* *
********************************************/
.sidebar-nav {
margin: 0;
padding: 0;
top: 0;
list-style: none;
position: absolute;
}
.sidebar-nav>li {
display: inline-block;
line-height: 20px;
position: relative;
width: 100%;
}
/********************************************
* *
* *
* DIV STYLE *
* *
* *
********************************************/
.container-fluid {
height: 100%;
}
.container-fluid h1 {
padding: 0;
margin: 0;
}
/********************************************
* *
* *
* PAGE BODY STYLE *
* *
* *
********************************************/
.header {
height: 10%;
background-color: yellow;
}
.contentBody {
height: 80%;
background-color: green;
}
.footer {
height: 10%;
background-color: blue;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="sidebarWrapper">
<ul class="nav sidebar-nav">
<li>
<a class="firstChild" href="/">Dashboard</a>
</li>
</ul>
</nav>
</div>
<div class="col-lg-10">
<div class="header">
<h1>Header</h1>
</div>
<div class="contentBody">
<h1>Content</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
</div>
</div>
</div>しかし、あなたがスニペットから見ることができるように私navbarは力を超えるブルートているようです任意のブートストラップカラムの制限を受け取り、ページ全体の幅をとります。
どうすればブートストラップ列の幅の100％がかかりますが、それ以上となることはありませんか？
ナビゲーションバーに明示的な幅を設定する必要があります。これはピクセル単位またはパーセントですが、割合はビューポートの幅に対する相対値であることに注意してください。これは、固定位置要素が文書フローから取り出されるため、その寸法が親要素ではなくビューポートを基準として計算されるためです。また、右：0宣言を削除することもできます。この宣言は、ナビゲーションバーをビューポートの幅に伸ばしています。 –
@ JonathanNicolだから、私はnavbarがブートストラップカラムの幅をすべて取るように奮闘するつもりですか？ – CBreeze
これは独自の幅を想定していませんが、デモでは幅が16.66666667％です。したがって、同じ幅に設定すると一致するはずです。 –