gpt4 book ai didi

css - 使用 Bootstrap 的全高列

转载 作者:太空宇宙 更新时间:2023-11-04 13:13:59 25 4
gpt4 key购买 nike

我想让我的侧边栏处于全高状态。我正在为我的博客使用 bootstrap,这里是一个示例页面:

http://blog-olakara.rhcloud.com/blog/2013/12/11/welcome-to-jekyll/

enter image description here

我试图避免屏幕底部的空白区域,并让蓝色背景一直到底部。我尝试实现此 SO question 中提到的第二个解决方案但是,它破坏了网页的响应特性。

我还发现了一些建议修改 Bootstrap 基础的解决方案,如“行”类。是否有保留响应的 Bootstrap 解决方案?

最佳答案

来自他们的 sample page :

<!-- Container-->    
<div class="container-fluid">
<div class="row">
<!-- sidebar -->
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
</div> <!-- sidebar -->

<!-- main pane -->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<p>hello world</p>
</div> <!-- main -->
</div> <!-- .row -->
</div> <!-- .container-fluid -->

您可能需要从他们的 custom CSS file 中调整一些设置

关于css - 使用 Bootstrap 的全高列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24496730/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com