Twitter bootstrap Bootstrap 3将容器宽度固定到媒体断点

如何将容器的宽度固定为等于介质断点？twitter.com也做了类似的事情。在用户将窗口调整为媒体断点之前，布局是相当稳定的。然后更改布局。

基本思想是：

HTML

<div class="container"> <!-- standard Bootstrap div ->
 <div class="content-wrap">
  <!-- page content here -->
 </div> <!-- end content-wrap -->  
</div> <!-- end container -->  

@media (min-width: Xpx) {
 .content-wrap{
  width:Xpx
  margin:0 auto;
 }
}  

您可以将容器包装元素放置在引导脚手架中

---

希望这有帮助

这是我所拥有的似乎有效的东西

/*==========  FIX WIDTH AT MEDIA BREAKPOINTS ==========*/
/* Large Devices, Wide Screens */
@media only screen and (min-width :1200px) {
  .media-container{
    width: 1200px;
  }
}
@media only screen and (max-width :1200px) {
  .media-container{
    width: 992px;
  }
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
  .media-container{
    width: 768px;
  }
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
  .media-container{
    width: 480px;
  }
}
/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
  .media-container{
    width: 320px;
  }
}
/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
  .media-container{
    width: 320px;  
  }
}
.media-container{
  margin: 0 auto;
}

然后我的html正文看起来像这样（我不希望页脚或页眉受到约束的限制）

---

这里的SASS版本更加简洁易读

// List of media 'breakpoints'
$px-list:             320 480 768 992 1200; //X
@each $px in $px-list {
  @media only screen and (min-width : #{$px}px ) {
    .media-container{
      width: #{$px}px;
      margin: 0 auto; 
    }
  }
}
// Produces content of form
// @media only screen and (min-width : Xpx) {
//   .media-container{
//     width: Xpx; 
//     margin: 0 auto; 
//   }
// }

---

这是PSEDOO代码，是吗？我想我已经明白了。是的@honkskillet，伪代码。首先，我将为您的CSS设置一些基本的站点范围的默认值，然后您的每个断点都有多个CSS媒体代码块。要让CSS级联为您工作，请先从最窄的视口开始，然后向上工作。

$index-list:          1 2 3 4 5 6;
$min-max-list:        min max max max max max;   //X
$min-max-width-list:  1200 1200 992 768 480 320; //Y
$width-list:          1200 992 768 480 320 320;  //Z
@each $i in $index-list {
  @media only screen and (#{nth($min-max-list,$i)}-width : #{nth($min-max-width-list,$i)}px ) {
    .media-container{
      width: #{nth($width-list,$i)}px;
      margin: 0 auto; 
    }
  }
}
// Produces content of form
// @media only screen and (X-width : Ypx) {
//   .media-container{
//     width: Zpx;  
//   }
// }

// List of media 'breakpoints'
$px-list:             320 480 768 992 1200; //X
@each $px in $px-list {
  @media only screen and (min-width : #{$px}px ) {
    .media-container{
      width: #{$px}px;
      margin: 0 auto; 
    }
  }
}
// Produces content of form
// @media only screen and (min-width : Xpx) {
//   .media-container{
//     width: Xpx; 
//     margin: 0 auto; 
//   }
// }