css - Bootstrap 自定义列宽堆叠而不是在调整大小时缩小

Question

我有一个 Bootstrap 网格布局如下:

一个 col-sm-10，每边一个 col-sm-1。

+----+----------------------------+----+
|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>

问题:

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

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

Answer 1

它不起作用的原因是当屏幕宽度小于 768px 时 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 会更好。