Twitter Bootstrap：修改col-sm的像素宽度阈值

Question

我有以下问题（最好用图片说明）：

中宽（使用col-md-3 ）

小宽度（使用col-sm-6 ）

中小时之间的宽度

列重新调整为 979px-1199px 宽度以显示最后一张图片（错误配置）......

对我来说，另一个选择就是创建一个中间类..比如说col-mdsm或其他什么并设置它的像素范围？

Answer 1

您可以手动更改此元素的字体大小：

@media (min-width: 979px and max-width: 1199px) {
    .elem-class-name {
        font-size: 13px; /*Needs to be adjusted */
    }
}

Answer 2

这不是您具体问题的答案，但我希望它能帮助其他人远离网格系统＆＃34;当它阻碍了预期的结果时。

如果你看看Getbootstrap.com - 官方的Bootstrap网站 - 在Glyphicon示例中是一个列表，它不是Bootstrap附带的类。它不是网格系统。事实上，在GetBootstrap.com上添加了很多自定义CSS。如果你看看任何一个展示网站，那里有很多自定义CSS，并且很多都没有使用Bootstrap。你很难在Vogue.com找到Bootstrap课程，但它仍然是展示网站的一部分。

无论如何，我会滚动一个自定义列表，就像GetBootstrap.com为他们的Glyphicon列表所做的那样：

DEMO：https://jsbin.com/yumoca/

<强> HTML

<div class="container">
   <ul class="audio-list list-inline">
      <li><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></li>
      <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
      <li><a href="#">Vestibulum auctor dapibus neque.</a></li>
      <li><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></li>
      <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
      <li><a href="#">Vestibulum auctor dapibus neque.</a></li>
     <li><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></li>
      <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
      <li><a href="#">Vestibulum auctor dapibus neque.</a></li>
     <li><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></li>
      <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
      <li><a href="#">Vestibulum auctor dapibus neque.</a></li>
      <li><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></li>
      <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
      <li><a href="#">Vestibulum auctor dapibus neque.</a></li>
   </ul>
</div>

<强> CSS

.audio-list {
    text-align: center;
}

.audio-list li {
    display: inline-block;
    padding: 5px;
    white-space:normal;
}

.audio-list li a {
    display: block;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    background: #f7f7f7;
    text-align:center;
    color:inherit;
}

@media (min-width:768px) { 
    .audio-list {
        font-size: 0px;
        text-align:left;
    }
    .audio-list li {
        display: inline-block;
        width: 50%;
        font-size: 14px;
        vertical-align: top;
    }  

}

@media (min-width:992px) { 
    .audio-list li {
        width: 33.33%
    }
}