css - 如何使用@media 在打印输出中隐藏打印按钮？

Question

我有一个引导列，其中有一个使用媒体属性的打印按钮。

<div class="panel-footer">
                    <div class="row">
                        <div class="col-md-offset-5 col-md-2">
                            <button class="btn btn-primary btn-wordwrap" ng-click="$print()" media="print"><span class="glyphicon glyphicon-print"></span> Print</button>
                        </div>
                    </div>
                </div>

@media 在 css 中的定义如下。

@media print {
    button {
        display: none !important;
    }
}

$Print() 在 Angular Controller 中的定义如下。

 $scope.$print = function () {
            window.print();
        };

它仍然在打印输出中打印打印按钮。任何想法我在这里缺少什么？谢谢!

Answer 1

.hidden-print

请参阅有关响应式实用程序的 Bootstrap 3 文档，打印

http://getbootstrap.com/css/#responsive-utilities-print