![引导程序3]( "引导程序3")
本文介绍了引导程序3 - 固定侧栏到满栏宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两列（ col-md-8 和 col-md-4 ）。第二列包含一个固定的侧栏。我希望侧边栏是 col-md-4 列的100％宽度。如下图所示的黑框是第二列。
我试过宽度为100％，但无法使用。
这是我的HTML。
.col-md-4 {border-style：solid;}。sidebar-nav-fixed {height：100％;宽度：15％; text-align：center;}。well {height：100％;} < link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheet/>< div class =container > < div class =row> < div class =col-md-8> < div class => < h1> Hello，world！< / h1> < / DIV> < / DIV> < div class =col-md-4> < div class =sidebar-nav-fixed affix> < div class =wellid =world> < ul class =nav> < li class =nav-header>侧边栏< / li> < li class =active>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li class =nav-header>侧边栏< / li> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li class =nav-header>侧边栏< / li> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < / UL> < / DIV> <！ - /。well - > < / DIV> < / DIV> < / DIV> < / - >< / div>
h2_lin>解决方案
position：fixed 元素应该定义与视口相关的所有内容（包括宽度）。
在CSS中根据父div设置宽度的唯一方法是 width：inherit
或者如果允许使用jquery，则可以使用以下代码。
$（document）.ready（function（）{var new_width = $（'。col-md-4'）。width（）; $（'。sidebar-nav-fixed'）。width new_width）;}）$（window）.resize（function（）{var new_width = $（'。col-md-4'）。width（）; $（'。sidebar-nav-fixed'）。width（new_width ）;}） .col-md-4 {border -style：solid;}。sidebar-nav-fixed {height：100％;宽度：15％; text-align：center;}。well {height：100％;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< link href =https ：//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssrel =stylesheet/>< div class =container> < div class =row> < div class =col-md-8> < div class => < h1> Hello，world！< / h1> < / DIV> < / DIV> < div class =col-md-4> < div class =sidebar-nav-fixed affix> < div class =wellid =world> < ul class =nav> < li class =nav-header>侧边栏< / li> < li class =active>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li class =nav-header>侧边栏< / li> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li class =nav-header>侧边栏< / li> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < / UL> < / DIV> <！ - /。well - > < / DIV> < / DIV> < / DIV> <！ - / row - >< / div>
I have two columns (col-md-8 and col-md-4). The second column contains a fixed side bar. I want the side bar to be 100% width of the col-md-4 column. The black box as seen in the image below is the second column.
I have tried width 100% but it does not work.
Here's my HTML.
.col-md-4 {
border-style: solid;
}
.sidebar-nav-fixed {
height: 100%;
width: 15%;
text-align: center;
}
.well {
height: 100%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="">
<h1>Hello, world!</h1>
</div>
</div>
<div class="col-md-4">
<div class="sidebar-nav-fixed affix">
<div class="well" id="world">
<ul class="nav ">
<li class="nav-header">Sidebar</li>
<li class="active"><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
<!--/.well -->
</div>
</div>
</div>
<!--/row-->
</div> 解决方案
position:fixed element is supposed to define everything (including width) in relation to the viewport.
The only way in css to set width according to it's parent div is width:inherit
or if jquery is allowed you can use following code.
$(document).ready(function() {
var new_width = $('.col-md-4').width();
$('.sidebar-nav-fixed').width(new_width);
})
$(window).resize(function(){
var new_width = $('.col-md-4').width();
$('.sidebar-nav-fixed').width(new_width);
}).col-md-4 {
border-style: solid;
}
.sidebar-nav-fixed {
height: 100%;
width: 15%;
text-align: center;
}
.well {
height: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="">
<h1>Hello, world!</h1>
</div>
</div>
<div class="col-md-4">
<div class="sidebar-nav-fixed affix">
<div class="well" id="world">
<ul class="nav ">
<li class="nav-header">Sidebar</li>
<li class="active"><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
<!--/.well -->
</div>
</div>
</div>
<!--/row-->
</div>这篇关于引导程序3 - 固定侧栏到满栏宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！