【问题标题】:Grails bootstrap hidden-print not working as expectedGrails bootstrap hidden-print 未按预期工作
【发布时间】:2014-06-05 22:46:33
【问题描述】:

所以,在我们的 grails 项目中,我们使用了twitter-bootstrap:3.1.1 插件。到目前为止还没有发现任何重大问题。

在我们的layouts/main.gsp 中,我们添加了一个不错的导航栏,可以随处可见。唯一的问题是我们不希望它在打印页面时打印。在2.3.2 中,在不止一种情况下,我们只需添加类来隐藏元素。正如您在下面看到的,hidden-print 被添加到外部元素中。打印时页面仍然包含标记为隐藏的项目。

作为测试,我决定将它放在应用程序中的其他随机元素上,并且在所有方面它似乎都忽略了不打印请求。

<div class="navbar navbar-default hidden-print" role="navigation">
  <div class="navbar-header">
    <g:link class="navbar-brand" uri="/">Eight States</g:link>
  </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><g:link controller="agency" action="index">Agency</g:link></li>
        <li><g:link controller="attendee" action="index">Attendee</g:link></li>
        <li><g:link controller="vendor" action="index">Vendor</g:link></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Reports <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><g:link controller="activityRegistration">Event Report</g:link></li>
            <li><g:link controller="attendee" action="flightReport">Flight Report</g:link></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
        <li>
        <sec:ifLoggedIn><a href="${createLink(uri: '/j_spring_security_logout')}">Logout</a></sec:ifLoggedIn>
        <sec:ifNotLoggedIn><g:link controller='login' action='auth'>Login</g:link></sec:ifNotLoggedIn>
        </li>
      </ul>
    </div>
  </div>

【问题讨论】:

  • 请注意...我最初将外部设置为nav,如引导帮助中所示,但它似乎没有帮助。
  • 打印媒体类型是否可能不包含引导 css?看到这个:stackoverflow.com/questions/12302819/…
  • @JoshuaMoore 有趣的发现 &lt;link href="/SomeProject/static/bundle-bundle_bootstrap_head.css" type="text/css" rel="stylesheet" media="screen, projection" /&gt; 是它被包含在项目中的方式。
  • 但是@media print { .hidden-print { display: none !important; } } 应该告诉它正确打印吗?这就是它包含在文档中的方式...没有 css 专家,但我认为不应该对此进行打印?
  • &lt;link href="/SomeProject/static/bundle-bundle_bootstrap_head.css" type="text/css" rel="stylesheet" media="all" /&gt; 与导航栏上的 hidden-print 类应该可以工作。

标签: css grails twitter-bootstrap-3 grails-2.0 grails-plugin


【解决方案1】:

问题是当媒体类型为打印时没有包含 CSS。

<link href="/SomeProject/static/bundle-bundle_bootstrap_head.css" type="text/css" rel="stylesheet" media="screen, projection">

这仅包括屏幕和投影的 CSS。

关于您的评论:我很确定如果链接元素上的媒体属性不包含print,那么打印时将不会解析 CSS。

因此,CSS 中的媒体查询根本没有机会运行。如果您查看getbootstrap.com 站点,您会发现它在样式表上不包含媒体规范,因此会针对所有媒体类型(包括打印)进行处理。

【讨论】:

  • 我想我会尝试找出一种方法来对插件进行错误报告...原来它确实需要添加print。你是一个救生员,感谢你所做的:-)
  • 不用担心。很高兴能提供帮助。
  • 我爱那个人。我正在处理完全相同的问题..即使在阅读了您的完整答案之后,我也明白了。 (媒体范围);)
猜你喜欢
  • 2020-03-07
  • 1970-01-01
  • 2022-01-21
  • 1970-01-01
  • 2020-11-27
  • 2020-11-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多