bootstrap printing width

问题

I'm using bootstrap in an app and as you can see (below) when printing the browser (left side) is using a really small width when printing (right) so the responsive layout is moving all the right site elements below the left side ones and the printing version won't fit in one single page.

Do you know how can I force the browser to keep the right width?

Thanks,

Remo

.

回答1:

I had a very similar problem. Ensuring the responsive css is enabled only for media="screen" solved it.

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet" media="screen">

回答2:

For Bootstrap 3, this solved my problem:

@media print {
  .container {
    width:100%;
  }
}

回答3:

Getting rid of the responsive style is the answer! thanks a lot !

I'm using rails twitter bootstrap, that recompiles the less sources, so just a little note to say that it works like this too (first line of bootstrap_and_overrides.css.less):

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

oops: edit, it works fine in development, but brings error when compiling for production... had to build 2 distinct bootstrap_and_overrides for screen and print version (looking for a cleaner solution)

来源：https://stackoverflow.com/questions/12246096/bootstrap-printing-width