引导自定义列宽度堆栈，而不是在调整大小时收缩。

Question

我有一个引导网格布局如下：

在两边都有一辆车-sm-10被一辆车所包围.

+----+----------------------------+----+
|sm-1| sm-10                      |sm-1|
+----+----------------------------+----+

它也使用列表组的样式，但我认为这并不重要。

我需要col 1在默认情况下比它们更小，并且我删除了填充，所以我要重写样式：

我将col 1改为4%的宽度，将col 10更改为92%的宽度：

.custom > .list-group-item > .col-sm-1 {
    width: 4%;
  background-color: green;
}
.custom > .list-group-item > .col-sm-10 {
    width: 92%;
  background-color: blue;

}

HTML：

<div class="custom list-group">
    <div class="row list-group-item">

      <div class="col-sm-1">
       xx
      </div>

      <div class="col-sm-10">
        MAIN
      </div>


      <div class="col-sm-1">
        xx
      </div>

    </div>
  </div>

这一问题：

我希望列保持在一行中，使用我的自定义列“断开”和“堆栈”，而不是像标准引导程序布局那样只缩小和停留在一行上。您可以在下面的链接中看到这一点，方法是将窗口拖动得更小：

http://www.bootply.com/9CVohbVSTL

Answer 1

它不能工作的原因是当屏幕宽度小于768 is时，sm列不再向左浮动，因此它们垂直叠加。使用xs列代替。此外，填充也不会从列本身中移除。

.custom > .list-group-item > div {
  padding: 0px;
}
.custom > .list-group-item > .col-xs-1 {
  width: 4%;
  background-color: green;
}
.custom > .list-group-item > .col-xs-10 {
  width: 92%;
  background-color: blue;
}

演示：http://www.bootply.com/aOgEGLXox9

这是可行的，但我认为在这种情况下最好不要使用Bootstrap列，而只使用自定义CSS。

Answer 2

我认为解决这个问题还有另外一个办法

减去计算列宽的公式：

宽度:百分比(@columns/@grid-columns)；

示例：

1 column / 12 grid-columns = 8.33% * 1170px = 97.5px
2 columns / 12 grid-columns = 16.67% * 1170px = 195px
3 columns / 12 grid-columns = 25% * 1170px = 292.5px
Etc…

使用上述方法，我在CODEPEN上创建了一个示例

CSS：

/* CSS used here will be applied after bootstrap.css */

.custom > .list-group-item {
  /* padding: 0px; */
}

.custom > .list-group-item > .col-xs-12 {
  width: 100%;
}

.custom > .list-group-item > .col-sm-1 {
  width: 6.33%;
  background-color: green;
}

.custom > .list-group-item > .col-sm-10 {
  width: 87.33%;
  background-color: blue;
}

.standard > .list-group-item > .col-sm-1 {
  background-color: green;
}

.standard > .list-group-item > .col-sm-10 {
  background-color: blue;
}

@media (max-width: 767px) {
  .custom > .list-group-item > .col-xs-12 {
    width: 100%;
  }
}

我希望这些信息可以帮助解决自定义列宽度的计算问题。

享受:)