Bootstrap 3 修复容器宽度到媒体断点

Question

如何将容器的宽度固定为等于媒体断点？ Twiter.com 做了类似的事情。在用户将 window 调整为媒体断点之前，布局非常稳定。然后布局改变。

Answer 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 脚手架中。

希望对您有所帮助！

Answer 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-holes 在那里，这里有一个几乎 难以理解的 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; 
//   }
// }