Bootstrap 3 将容器宽度修复为媒体断点答案

【问题标题】：Bootstrap 3 fix container width to media breakpointsBootstrap 3 将容器宽度修复为媒体断点
【发布时间】：2015-05-01 14:02:05
【问题描述】：

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

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 sass media breakpoints

【解决方案1】：

基本思路是：

HTML

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

CSS

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

您可以将 container-wrap 元素放置在 Bootstrap 脚手架内。

希望这会有所帮助！

【讨论】：

那是伪代码，是吗？我想我刚刚想通了。
是的@honkskillet，伪代码。我正在想象你的 CSS 首先设置了一些基本的站点范围的默认值，然后你的每个断点都有这个 CSS 媒体代码的多个块。要让 CSS 级联为您工作，请先从最窄的视口开始，然后再进行处理。

【解决方案2】：

这是我所拥有的，似乎有效。

/*==========  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 正文看起来像这样（我不希望我的页脚或页眉受到约束）。

<div class="myHeader"><!-- header markup --></div>
<div class="media-container">
  <!-- my page contents -->
</div>
<div class="myFooter"><!-- footer markup --></div>

~~对于所有 SASS 漏洞，这里有一个几乎难以理解的 SASS 解决方案...~~

$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;  
//   }
// }

这里有更简洁、可读的 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; 
//   }
// }

【讨论】：