Question

我使用的代码是这样的：

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

问题是，当窗口调整大小时，fontawesome / glyphicon太大了。我怎样才能使div达到某个最小宽度时，fa-tasks图标不会出现？

请参阅下面的内容，如果它的宽度小于它刚刚说的那么宽，我更喜欢左边的例子＆＃34; 6维护＆＃34; 没有图标。显然，右边的那个很好，通常看起来应该如何。

由于

enter image description here

Answer 1

Here是bootstrap的文档。看看hidden-xs类。这可能有所帮助，但它确实取决于未发布的html页面的细节。

Answer 2

使用其中一个Responsive utilities，如hidden-sm（在Bootstrap 3中）：

<i class="fa fa-tasks fa-5x hidden-sm"></i>

Answer 3

如果您不想使用内置的自适应实用程序，可以添加自定义CSS media query：

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

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

Answer 4

以下是您的第三个选项：jQuery: get div-width after document is ready and rendered。添加两个新类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>

当div的大小减小到一定宽度时，删除图标（引导程序）

4 个答案: