Question

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

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

您可以将容器包装元素放在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; 
//   }
// }

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

2 个答案: