22

私はアプリでブートストラップを使用しています。ご覧のとおり（下）ブラウザを印刷するとき（左側）は印刷時に非常に狭い幅を使用している（右）ので、レスポンシブレイアウトはすべての右側のサイト要素を左側の下に移動していますものと印刷版は1つのページに収まりません。

ブラウザに正しい幅を維持させる方法を知っていますか？

ありがとう、

レモ

有効なXHTML。

4

3 に答える 3

24

私は非常によく似た問題を抱えていました。レスポンシブcssが有効になっていることを確認するのは、media="screen"それを解決するためだけです。

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
于 2012-09-03T15:42:51.930 に答える
8

Bootstrap 3の場合、これで問題が解決しました。

@media print {
  .container {
    width:100%;
  }
}
于 2016-06-14T07:31:09.970 に答える
3

レスポンシブスタイルを取り除くことが答えです！どうもありがとう ！

私はrailstwitterbootstrapを使用していますが、これは少ないソースを再コンパイルするので、これもこのように機能することに注意してください（bootstrap_and_overrides.css.lessの最初の行）：

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

おっと：編集、開発では正常に動作しますが、本番用にコンパイルするとエラーが発生します...画面バージョンと印刷バージョン用に2つの異なるbootstrap_and_overridesを構築する必要がありました（よりクリーンなソリューションを探しています）

于 2013-02-21T10:19:36.470 に答える