bootstrap largeur d'impression

Je suis en utilisant bootstrap dans une application et comme vous pouvez le voir (ci-dessous) lors de l'impression du navigateur (côté gauche)
est d'utiliser une très petite largeur lors de l'impression (à droite), de sorte que le responsive layout est de déplacer tous les éléments du site en dessous de ceux de gauche, et l'impression de la version ne tient pas sur une seule page.

Savez-vous comment puis-je forcer le navigateur à garder la bonne largeur?

Merci,

Remo

bootstrap largeur d'impression.

  • A ma réponse de l'aide? Votre problème semble vraiment correspondre à la mienne. Si cela résout votre problème, je vais demander le bootstrap développeurs de parler de la media="screen" attribut dans leurs docs: github.com/twitter/bootstrap/blob/master/docs/...
InformationsquelleAutor Remo H. Jansen | 2012-09-03
  1. 23

    J'ai eu un problème similaire.
    Assurer la responsive css est activée uniquement pour les media="screen" résolu.

    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
    • Merci ça fonctionne pour moi 🙂
    • Si vous êtes en train de charger à partir de bootstrapcdn.com la version ultérieure n'ont pas de séparer bootstrap-responsive.css, seulement bootstrap-combined.min.css qui est tout, y compris de la réactivité de styles et de bootstrap.min.css qui est tout sauf de la réactivité des styles. Pour contourner ce problème, vous pouvez charger les deux fichiers distincts media paramètres: <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css" media="print"> & <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" media="screen">
    • Si vous remarquez les deux différents numéros de version, c'est à cause de ce bug github.com/netdna/bootstrap-cdn/pull/106 . Dans la v2.3.2 bootstrap.min.css comprend le réactif de styles, quand il ne devrait pas.
    • Personne ne sait comment faire cela avec bootstrap 3?
    • href="http://getbootstrap.com/css/#responsive-utilities-print" >bootstrap 3 est natif de classes css vous pouvez appliquer à des éléments de bascule qui doit s'afficher lors de l'impression.
    • est-il rien de plus que d'être cachés + visible classes de bootstrap 3 pour résoudre ce problème? Il s'agirait d'une tonne de dupliquer html si je dois créer des états pour l'impression de l'écran.
    • Ces classes sont ce qui est disponible: getbootstrap.com/css/#responsive-utilities-print

    InformationsquelleAutor silviot
  2. 8

    Pour Bootstrap 3, cela a résolu mon problème:

    @media print {
  .container {
    width:100%;
  }
}
    • Pas pour moi. Elle sort de la page.
    • Mais une largeur fixe a fait le tour @media print { body { width:992px; } } merci pour l'idée.
    • Cela fixe la largeur problème parfaitement pour moi. Merci.
    InformationsquelleAutor Markus
  3. 3

    Se débarrasser de la réactivité du style est la réponse! merci beaucoup !

    Je suis à l'aide de rails de twitter bootstrap, qui recompile le moins de sources, donc, juste un petit mot pour dire que ça marche comme ça aussi (première ligne de bootstrap_and_overrides.css.moins):

    @import "twitter/bootstrap/bootstrap.less";
@media screen {
    @import "twitter/bootstrap/responsive.less";
}

    oops: modifier, il fonctionne très bien dans le développement, mais apporte d'erreur lors de la compilation de production... dû construire 2 distinctes bootstrap_and_overrides de l'écran et l'impression de la version (la recherche d'une solution plus propre)

    InformationsquelleAutor user14169