bootstrap自定义列宽度堆栈而不是在调整大小时收缩

Question

我有一个自举网格布局如下：

每侧都有col-sm-1包围的col-sm-10。

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

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

我需要col-sm-1默认比它们小，我删除了填充，所以我压倒了样式：

我将col-sm-1更改为4％的宽度，将col-sm-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>

问题：

我希望列保持在一行，我的自定义列是＆＃34; break＆＃34; ＆＃34; stack＆＃34;而不是像标准的引导程序布局一样缩小并保持在一条线上。您可以在下面的链接中看到此内容，方法是将窗口拖得更小：

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

Answer 1

它不起作用的原因是因为当屏幕宽度小于768px时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; } 列。此外，填充不会从列本身中删除。

{{1}}

演示：

这样可行，但我认为在这种情况下根本不使用Bootstrap列会更好，只需使用自定义CSS。

Answer 2

我认为还有另一种方法可以解决这个问题

用于计算列宽的LESS公式：

width：percentage（（@ 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…

使用上述方法我在 spec

创建一个示例

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

我希望这些信息可能有助于计算自定义列宽

享受：）