在 Bootstrap 仪表板模板示例中设置特定的侧边栏宽度答案

【问题标题】：Set a specific sidebar width in Bootstrap dashboard template example在 Bootstrap 仪表板模板示例中设置特定的侧边栏宽度
【发布时间】：2016-04-15 12:12:48
【问题描述】：

我正在使用 Bootstrap 附带的仪表板模板示例。侧边栏在一定的屏幕尺寸后消失，这很好。但我想设置一个特定的宽度直到那个点。现在它在更大的屏幕上具有响应性和宽度延伸（在大显示器上有点讨厌。）一个好的宽度是250px。

CSS

/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
}


/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}


/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #31373d;
    border-right: 1px solid #eee;
  }
}

/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
  color: #98a7b5;
}

.nav-sidebar > li > a:hover {
    background: transparent;
    color: #fff;
}

.nav-sidebar > .active > a, .nav-sidebar > li > a:hover {
  color: #fff;
  background-color: #272c30;
}


/*
 * Main content
 */

.main {
  padding: 20px;
}
@media (min-width: 768px) {
  .main {
    padding-right: 40px;
    padding-left: 40px;
  }
}
.main .page-header {
  margin-top: 0;
}


/*
 * Placeholder dashboard ideas
 */

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
  display: inline-block;
  border-radius: 50%;
}

有什么想法吗？谢谢。源代码可在getbootstrap.com获得

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

max-width: 250px 在你的.sidebar CSS 中怎么样？

【讨论】：

试过了，效果很好，但是在主要内容和侧边栏之间留出了很大的空间。解决方案？

【解决方案2】：

您可以使用 CSS 媒体查询在更大的屏幕上设置最大宽度..

@media (min-width: 992px){
 .sidebar {
   max-width:250px;
 }
}

演示：http://www.bootply.com/126485

【讨论】：

它可以工作，但正如你所见，它在侧边栏和主要内容之间创建了一个巨大的空间。你有解决办法吗？我忘了在我的问题中提到它。

【解决方案3】：

我刚刚遇到了同样的问题。对我来说，我很高兴侧边栏在中小型视口中保持流畅。在 1200 像素或更大的大视口中，我希望有 250 像素的固定宽度，然后让主要内容区域覆盖其余部分。

在 HTML 中给你的主要内容 div 一个类名或 id。这将使在您的 css 媒体查询中选择它变得容易。在这里，我使用了一个名为 'content' 的类。

<div class="col-sm-3 sidebar"> ...  </div>
<div class="col-sm-9 col-sm-offset-3 content"> ... </div>

然后添加你的css：

@media(min-width:1200px){ // breakpoint where I set a fixed sidebar width. You can change this to whatever you want.
  .sidebar {width:250px}
  .content {margin-left:0;padding-left:265px;width:100%;} // reset the width and margin, overwriting the bootstrap grid. Add padding to the left to equal the width of your fixed width sidebar + half your defined grid gutter width. For me that is the default 15px.
}

【讨论】：