移动/字形图标和字体大小调整上的引导选项卡答案

【问题标题】：Bootstrap tabs on mobile / glyphicon and font resizing移动/字形图标和字体大小调整上的引导选项卡
【发布时间】：2014-01-23 12:21:08
【问题描述】：

我有 4 个选项卡，其中包含一个大字形图标和一些文本，它们在台式机上看起来很棒，但是一旦缩小到移动设备尺寸，它看起来就有点……不合适！

移动

桌面

Mobile2

这里是html：

    <div class="row mt">
        <div class="col-md-12">
            <ul class="nav nav-tabs centered" data-tabs="tabs">
                <li class="active"><a href="#film" data-toggle="tab"><p><span class="fa fa-film large"></span></p><p>filming and editing</p></a></li>
                <li><a href="#autocue" data-toggle="tab"><p><span class="fa fa-list-alt large"></span></p><p>autocue services</p></a></li>
                <li><a href="#openers" data-toggle="tab"><p><span class="fa fa-play-circle-o large"></span></p><p>animation openers and stings</p></a></li>
                <li><a href="#cbt" data-toggle="tab"><p><span class="fa fa-laptop large"></span></p><p>computer based training</p></a></li>
            </ul>
        </div>
    </div>

这是唯一适用的自定义 CSS

.large {
    font-size: 100px;
}

其余的只是标准引导程序。

【问题讨论】：

如何使用media queries？
我在考虑这个问题，但字形图标和实际文本都需要 2 个不同的吗？我认为可能有更好的方法？
好的，刚刚尝试了一个媒体查询来简单地更改字形图标的大小，但现在它似乎是一个标签问题......（参见图片 Mobile2）
尝试将这个额外的类应用到<ul class="list-inline">
你在使用 jQuery Mobile 吗？

标签： jquery html css twitter-bootstrap mobile

【解决方案1】：

最好的方法是将媒体查询与 Bootstrap 自己的变量结合起来：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
.font-size: 11px; // regular text
.large {
    font-size: 20px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
    .font-size: 13px; // regular text
    .large {
        font-size: 50px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
    .font-size: 16px; // regular text
    .large {
        font-size: 100px;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {
    .font-size: 18px; // regular text
    .large {
        font-size: 150px;
    }
}

如您所见，您使用相同的查询设置了常规字体大小和“大”字体大小。调整您认为合适的各个值:)

【讨论】：

谢谢，刚试过，但现在似乎是标签问题（见新图片）。
问题是你的整套标签都被装进了一个狭小的空间，它迫使它们水平对齐彼此相邻。为文本释放更多空间的唯一方法（如果您不希望使文本变小）是为各个选项卡提供响应网格类。（col-md、col-lg 等）。一旦您低于某个阈值，这将使选项卡垂直堆叠。见getbootstrap.com/css/#grid
我想我会选择网格选项并在我进行时稍微调整字体大小。感谢您的帮助。

【解决方案2】：

您可以进行此媒体查询：-

@media (max-width: 768px) {
.large {
    font-size: 10px; // Adjust this as required
   }
}

【讨论】：