jjzjj

responsive-design - bootstrap 3.0 全长正文侧边栏

coder 2023-08-01 原文

我正试图让 bootstrap div 成为整个 body 的长度。

这是我迄今为止尝试过的:http://jsfiddle.net/bKsad/315/ 

html, body {
    min-height: 100%
}
.wrap {
    height: 100%
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    min-height:100% !important;
    position:relative;
}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

随着右侧栏变长，我希望边栏也变长。

最佳答案

关键是理解Bootstrap 3提供的“col-md-x”和“col-md-offset-x”样式:

<div class="container-fluid">
 <div class="row">
  <div class="col-md-3 sidebar">
   Sidebar Content
  </div>
  <div class="col-md-9 col-md-offset-3 content">
   Main Content
  </div>
 </div>
</div>

然后使用 CSS 确保断点对齐。您需要根据您的特定需求微调填充/边距，但偏移量和@media 断点可以很好地处理整体布局:

html, body, .container-fluid, .row {
    height: 100%;
}

.sidebar {
  background-color: #CCCCCC;
}

@media (min-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: block;
    background-color: #CCCCCC;
  }
}

工作解决方案:http://www.bootply.com/111837

如果您使用“col-sm-x”或“col-lg-x”，您只需将@media CSS 更改为相应的最小宽度(sm 为 768px，lg 为 1200px)。 Bootstrap 会处理剩下的事情。

关于responsive-design - bootstrap 3.0 全长正文侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20128472/

侧边全长sectionsidebardivresponsive-designtwitter-bootstrap-3html

有关responsive-design - bootstrap 3.0 全长正文侧边栏的更多相关文章

  1. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  2. Qt Designer的简单使用 - 2

    在前面两节的例子中，主界面窗口的尺寸和标签控件显示的矩形区域等，都是用C++代码编写的。窗口和控件的尺寸都是预估的，控件如果多起来，那就不好估计每个控件合适的位置和大小了。用C++代码编写图形界面的问题就是不直观，因此Qt项目开发了专门的可视化图形界面编辑器——QtDesigner（Qt设计师）。通过QtDesigner就可以很方便地创建图形界面文件*.ui，然后将ui文件应用到源代码里面，做到“所见即所得”，大大方便了图形界面的设计。本节就演示一下QtDesigner的简单使用，学习拖拽控件和设置控件属性，并将ui文件应用到Qt程序代码里。使用QtDesigner设计界面在开始菜单中找到「Q

  3. ruby-on-rails - 使用 HTTP.get_response 检索 Facebook 访问 token 时出现 Rails EOF 错误 - 2

    我试图在我的网站上实现使用Facebook登录功能，但在尝试从Facebook取回访问token时遇到障碍。这是我的代码:ifparams[:error_reason]=="user_denied"thenflash[:error]="TologinwithFacebook,youmustclick'Allow'toletthesiteaccessyourinformation"redirect_to:loginelsifparams[:code]thentoken_uri=URI.parse("https://graph.facebook.com/oauth/access_token

  4. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  5. ruby-on-rails - 在 Rails 中获取 "Incomplete response received from application" - 2

    有人可以帮忙吗？我的堆栈是带有nginx/passenger和ruby​​2.2.2的ubuntu-server14.04。我无法使我的项目投入生产。在开发中一切运行正常。secret.ymlproduction:secret_key_base:secret_token:服务器server{listen80;server_namelogvs.local;passenger_enabledon;passenger_app_envdevelopment;root/var/www/logvs/public;}错误日志App2532stderr:[2015-06-0722:56:01.4724

  6. ruby-on-rails - 开始新的 Rails 3.0 项目时应该使用 ruby​​ 1.9.2 吗？ - 2

    应用将在Heroku上运行依赖包括回形针哈姆指南针设计aws-s3支持或反对的理由？对其他版本的ruby​​有什么建议吗？更新Heroku目前不支持1.9.2，但预计很快会基于thispost.Rails3.0正式支持1.9.2(但不支持1.9.1)，所以我决定继续使用它。更新Heroku在其beta堆栈上支持1.9.2。 最佳答案 我会说是的。当您准备好推出您的应用程序时(2-3个月？)，应该解决越来越多的兼容性问题。此外，如果您遇到任何问题，您可以提交补丁并为更快的1.9.2兼容性做出贡献!;)但是为了回答您的问题，考虑到您要使

  7. ruby-on-rails - 在表单中使用来自 Twitter Bootstrap 的 Typeahead (formtastic) - 2

    我如何像这样从Bootstrap中集成typeahead:变成这样的标准形式: 最佳答案 在你的Controller中defindex@autocomplete_items=Model.allend在您看来，就像您为选择器添加了一个额外的ID...最重要的是，将Controller中定义的@autocomplete_items实例变量传递给View中的Javascript变量:这将序列化您的数据并使其成为可用于Typeahead函数的JSON。至于Typeahead，只需将该对象(@autocomplete_items)作为JSON

  8. ruby-on-rails - 将 Bootstrap 图标添加到 Ruby on Rails 中的按钮 - 2

    我想在RubyonRails中为按钮添加图标。目前我尝试了以下方法:"),{:controller=>'events',:action=>"upvoteEvent",:method=>"put",:id=>@event.id,:uid=>current_user.id},{:class=>"btnbtn-success"}%>生成以下html:"/>我遵循了此处发布的解决方案:https://stackoverflow.com/a/10468935/1385324，但这对我不起作用。我还测试了BootstrapCSS是否正常工作，只需在网站的其他任何地方插入一个图标即可。感谢您的帮助!

  9. css - 在 rails 中使用 Bootstrap Sass 时出错 - 2

    我正在开发一个简单的ruby​​onrails应用程序，但出现以下错误:TypeError:无法读取未定义的属性“进程”(在/home/saasbook/Documents/projects/Bookkeeper/app/assets/stylesheets/application.css.sass)提取的源码如下:Bookkeepertrue%>//Highlightederrorlineinextracttrue%>此错误发生在我使用BootstrapSass插件添加BootstrapSass并遵循此tutorial之后摘录下方指出错误位于:app/views/layouts/ap

  10. ruby-on-rails - Rails/Bootstrap - Flash 通知 :success is now red and not green? - 2

    我一直试图在这里寻找答案，但我找不到任何有用的东西。我已经对我的Rails应用程序实现了:success和:dangerflash通知。它工作得很好，即:success是绿色的，:danger是红色的，有一个关闭按钮等等，但是自从添加了一些邮件文件后，我的:success现在显示为红色？application.html.erb摘录:×contact_mailer.rbclassContactMailercontacts_controller.rbclassContactsController还有，contact_email.html.erbNewMessagefromHoo

随机推荐