user210757 user210757 - 3 months ago 8
CSS Question

bootstrap custom column widths stack rather than shrink on resize

I have a bootstrap grid layout as follows:

A col-sm-10 surrounded by a col-sm-1 on each side.

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


It's also using the list-group styling but I don't think that matters.

I need the col-sm-1 to be smaller than they are by default, and I remove padding, so I am overriding the style:

I change the col-sm-1 to a width of 4%, and the col-sm-10 to a width of 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>


THE ISSUE:

I want the columns to stay in one row, with my customizations the columns "break" and "stack" rather than just shrinking and staying on one line like the standard bootstrap layout does. You can see this in the link below, by dragging the window smaller:

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

Answer

The reason it's not working is because the sm columns no longer float left when the screen width is less than 768px so they stack vertically. Use the xs columns instead. Also, the padding is not being removed from the columns themselves.

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

Demo: http://www.bootply.com/aOgEGLXox9

This works, but I think it would be better to not use the Bootstrap columns at all in this case and just use custom CSS.

Comments