Question

我正在使用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

处获得

Answer 1

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

Answer 2

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

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

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

Answer 3

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

在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.
}

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

3 个答案: