Twitter bootstrap Bootstrap 3.3以特定宽度将col-lg-10扩展到col-lg-12

这看起来应该很简单，但我的CSS/响应能力不是最好的。我对SO进行了粗略的搜索，没有看到任何符合我要完成的目标的东西

我的网站有一个基本的两栏布局-

col-lg-10

和

col-lg-2

在一个流体容器内

col-lg-2

div是一个类似于facebook的活动提要，我想将其折叠到特定宽度或以下。我让这部分工作。诀窍在于，当

col-lg-2

崩溃时，我在屏幕右侧的

col-lg-2

曾经所在的位置会出现一个很大的间隙。我希望“col-lg-10”能够扩展到此时占据整个屏幕，而不是留下空白

---

在

中真正简单的例子是，您的问题是您没有使用与引导相同的

最小宽度

您使用引导中的

col lg-*

类作为主要内容，该类在

>=1200px时生效。
但对于折叠的部分，您使用自己的媒体查询，该查询在
=1400px

因此，例如，当浏览器的宽度为1300px时，折叠的部分不可见，因为条件
=1400px
返回
false
，但引导已经生效，因为条件
=1200
返回
true

要解决您的问题，请使用与引导相同的最小宽度，因此更改CSS：

@media screen and (min-width: 1400px) {

为此：

@media screen and (min-width: 1200px) {

更新：

例如，尝试并改进此css：

    .has-border { border: 1px solid black; }

.main-content{
  display: block;
}

@media screen and (min-width: 1200px){
  .main-content{
   display: inline-block;
   width: 83.333%;

    float: left;
  padding-right: 15px;
  padding-left: 15px;
  }
}
.collapsible { display: none; }
@media screen and (min-width: 1200px) {
  .collapsible {

    display: block;
    width: 16.666%;
    margin: 0;
float: left;
  padding-right: 15px;
  padding-left: 15px;
  } 
}

我的问题是，在1200px的速度下，主内容和活动提要都会被压扁，无法在桌面级别真正工作。是否可以将col lg-*的断点改为1400，其余的保持不变？是的，在这种情况下，您可以创建自己的媒体查询，主内容的最小宽度为1400px（就像您对折叠表所做的那样）。然后使用这个新类，而不是引导类来呈现内容。您可以查看引导源代码以获得媒体查询库的示例！我会尝试一下，然后报告发生了什么。到目前为止，还没有成功。我再次认为这是我对媒体查询和引导的无知。感觉我可能很接近。它可以在1200点正常工作，就像我想要的，但在1200到1400点之间，它会折叠成我不想要的堆叠布局。这并不是我想要的。。。看看我上面更新的答案。