Twitter引导:修改象素宽度阈值

Question

我有以下问题(最好用图片来说明)：

中等宽度(使用col-md-3)

​

小宽度(使用-sm-6)

​

中、小型宽度

​

列调整为979px-1199px宽度以显示最后一个图像(糟糕的配置).

我的另一个选择是创建一个中介类。比如说-mdsm或者什么的，并为它设置像素范围？。

Answer 1

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

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

Answer 2

这不是对您的具体问题的回答，但我希望它将帮助其他人“远离网格系统”，因为它会妨碍所期望的结果。

如果你看看GetBootstrap.com --官方的Bootstrap网站--那是一个列表，它不是Bootstrap附带的类。不是网格系统。事实上，在GetBootstrap.com上有很多定制的CSS，并添加了类。如果您查看任何一个展示网站，有大量的自定义CSS和大量不使用任何与Bootstrap有关的东西。你很难在Vogue.com中找到一个引导类，但它仍然是展示站点的一部分，go图。

无论如何，我会提交一个定制列表，就像GetBootstrap.com为他们的糖列表所做的那样：

演示：https://jsbin.com/yumoca/

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