Search code examples
twitter-bootstraptwitter-bootstrap-rails

Twitter Bootstrap: How to print Thumbnails as same as screen?

I want to print Twitter Bootstrap Thumbnails as same as screen, but they expand horizontally and background color turns black. I am using Twitter Bootstrap 2.1.1(twitter-bootstrap-rails 2.1.3) and Chrome on Mac.

My problem is reproduced on this page:

http://twitter.github.com/bootstrap/components.html#thumbnails

Here are screenshots as example.

enter image description here

enter image description here

I would appreciate any help.

UPDATE

Thanks to zeMicro's answer, this problem is fixed. If you are using twitter-bootstrap-rails, you can remove responsive.css by editing bootstrap_and_overrides.less.

And you can change the background color by specifying it in your css file.

Solution

  • That's because of bootstrap's responsive design. The following line is important:

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

    Change it to

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

    Then the responsive stylesheet is ignored while printing.