Twitter bootstrap 当div的大小减小到某个宽度时移除图标（引导）

我使用的代码如下所示：

<div class="col-lg-2 col-md-4">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="row">
                <div class="col-xs-3">
                    <i class="fa fa-tasks fa-5x"></i>
                </div>
                <div class="col-xs-9 text-right">
                    <div class="huge">6</div>
                    <div>Maintenance</div>
                </div>
            </div>
        </div>
        <a href="/maintenance.php">
            <div class="panel-footer">
                <span class="pull-left">View Tasks</span>
                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                <div class="clearfix"></div>
            </div>
        </a>
    </div>
</div>

6.
维修

问题是，当窗口调整大小时，Fontsome/Glyph图标太大。如何使div达到某个最小宽度时，

fa tasks

图标不会出现

看到下面这个，我更喜欢左边的例子，如果它的宽度小于这个宽度，它只是说“6维护”，没有图标。很明显，右边的那个很好，它通常应该是什么样子的

谢谢

是用于引导的文档。查看隐藏的xs类。这可能会有所帮助，但这取决于未发布的html页面的细节。

使用类似的

隐藏sm

（在引导3中）：

---

如果不想使用内置的响应实用程序，可以添加自定义：

@介质（最大宽度：600px）{
.fa任务{
显示：无；
}
}

---

这将导致“fa任务”图标在屏幕宽度低于600px时消失。

这里有第三个选项供您选择：。添加两个新类，

task

和

task icon

以及一些Javascript：

...
            <div class="row task">
            <div class="col-xs-3">
                <i class="fa fa-tasks fa-5x task-icon"></i>
            </div>
            <div class="col-xs-9 text-right">
                <div class="huge">6</div>
                <div>Maintenance</div>
            </div>
        </div>
...
<script>
$().ready(function() {
    var $width = $(".task").attr("width");
    if ($width < 50)
        $(".task-icon").hide();
}
</script>

。。。
6.
维修
...
$（）.ready（函数（））{
var$width=$（“.task”）.attr（“width”）；
如果（$width<50）
$（“.task icon”）.hide（）；
}

您使用的是哪个版本的引导？为glyph提供一个新的自定义类并更改字体大小。删除它将在结构中创建一个空类。减少它将有所帮助。我认为您需要为特定的div使用javascript。测量div的大小，并根据该大小为元素应用类。我看了一下在

隐藏的xx

类中，我在其他地方实际使用过它们-但在这种情况下，我不认为我可以仅仅依靠它，我更喜欢硬编码，这样当外部div减小到一定的宽度时，我就隐藏了图标。我可以这样做吗？我想这就是

隐藏的xx

类的用途。你试过了吗？我可以我试一下。这就是为什么我希望我可以明确地指定一个最小像素宽度，而不是依赖于sm/md/lg values Bootstrap使用的任何东西？谢谢，但我想我可能把我的问题说得不好。我不是说屏幕宽度，我是说div宽度。也就是说，那个包含所有内容的蓝色框。因为我d当我调整屏幕大小时，在某些点上，div变得太窄，无法容纳所有内容。但即使在手机大小的屏幕上，它看起来也不错（因为所有的框都有新的行）。但在屏幕大小介于两者之间的某些情况下，div宽度变得太小。我希望这有意义？

<style>
@media (max-width: 600px) {
  .fa-tasks {
    display: none;
  }
}
</style>

...
            <div class="row task">
            <div class="col-xs-3">
                <i class="fa fa-tasks fa-5x task-icon"></i>
            </div>
            <div class="col-xs-9 text-right">
                <div class="huge">6</div>
                <div>Maintenance</div>
            </div>
        </div>
...
<script>
$().ready(function() {
    var $width = $(".task").attr("width");
    if ($width < 50)
        $(".task-icon").hide();
}
</script>