打印 Bootstrap 网站

Question

我用bootstrap创建了我的简历，将栏分为3和9。前3栏都是技能，9栏是我的工作经验。现在是时候将网页转换为 pdf 格式（雇主希望它是 pdf a4 大小）时，bootstrap 有点组合了这些列。我有下面的代码

锚标记也显示了它link要访问的页面？我只是想让它看起来和网页一模一样。因此，雇主可以单击 href link 并访问该网站。

有人推荐使用 col-sm-*。我已经在使用它了，但它看起来不太对劲。

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Hi Hello</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>

    <!-- Custom CSS -->
    <style>
    body {
        padding-top: 70px;
        /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    }


    h1 { 
     }

     .greybackground{

     }

     .content{
        color:  #505050;
        border-style: solid;
        border-width: 1px;
        font-family: 'Titillium Web', sans-serif;

     }

     .skills{
     }



     .heading2{
        font-size: 18px;
        font-weight: bold;
     }


     .company{
        /*font-style: italic;*/
        text-align:right;
     }

     .heading{
        color:  #909090;
     }

     .job-title{
        font-size: 15px;
        font-weight: bold;
     }


     .techused{
        font-style: italic;
        color:  #909090;

     }

     .contact{
        text-align:right;
     }

    </style>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">


</head>

<body>
    <!-- Page Content -->
    <div class="container content">

        <div class="row">
            <div class="col-sm-7">
               <h1> Hello </h1>

            </div>

            <div class="col-sm-5 heading contact" >
                Website :<a href="http://www.google.com" >Lin </a>
                <br>
                GitHub :<a href="https://google.com" >jj</a>
                <br>
                LinkedIn : <a href="https://www.google.com">likka</a>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-sm-3"> 
                <div class="heading heading2">  <i class="fa fa-wrench "></i> SKILL SET </div>
                <hr>
                <div class="skills">
                    PROGRAMMING
                    <ul>
                        <li> Java </li>
                        <li> C++ </li>
                        <li> C </li>
                        <li> RobotC </li>
                    </ul>

                    <br>

                    WEB DEVELOPMENT

                    <ul>
                        <li> JavaScript</li>
                        <li> HTML/CSS </li>
                        <li> PHP </li>
                    </ul>

                    <br>

                    DATABASE

                    <ul>
                        <li> SQL</li>
                    </ul>
                </div>

                <hr>
                <div class="heading heading2">  <i class="fa fa-wrench "></i> EDUCATION </div>
                <hr>
                <div class="skills">
                    Hello
                </div>
            </div>
            <div class="col-sm-9">
                <div class="heading heading2"> <i class="fa fa-briefcase"></i>  WORK EXPERIENCE </div>
                <hr>
                <div class="row ">

                    <div class="position col-sm-8 job-title" >Software and Web Developer</div> 
                    <div class="company col-sm-4"><img src="" style="height:16px;width:8px;"> kkk</div>

                    <div class="col-sm-12 greybackground">
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </li>

                        </ul>

                        <div class="techused">Technologies used : Java , JavaFX , SQL , JDBC , Selenium , JavaScript , jQuery , PHP </div>
                    </div>
                </div>
                <br>
                <div class="row ">

                    <div class="position col-sm-8 job-title" >Infrastruture Security Analyst</div> 
                    <div class="company col-sm-4"><img src="http://upload.wikimedia.org/wikipedia/en/5/53/Maple_Leaf_Foods.svg" style="height:20px;width:20px;"> Maple Leaf Foods</div>

                    <div class="col-sm-12 greybackground">
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  </li>
                        </ul>

                         <div class="techused"> Technologies used : Microsoft's SCCM, Cisco's IronPort , FireEye and ePo.</div>
                    </div>
                </div>
                <hr>
                <div class="heading heading2"> <i class="fa fa-code"></i> PROJECTS</div>
                <hr>
                <div class="row ">

                    <div class="position col-sm-8 job-title" >Hello</div> 
                    <div class="company col-sm-4"><img src="http://hackthenorth.com/img/logo.png" style="height:15px;width:15px;"> Hack the North</div>
                    <div class="col-sm-12 greybackground">
                        <ul>
                            <li>
                                Won top pebble award at Canada's largest Hackathon by developing a Nocturnal epilepsy tracker and prevention pebble application.
                            </li>
                            <li>
                                Worked as a pair programmer on the Pebble and Android Platforms to capture, store and send information to a server database for further data analytics
                            </li>
                        </ul>

                        <div class="featured">Featured On : <a href="https://news.ycombinator.com/item?id=8372583">Hacker News</a>, <a href="http://challengepost.com/software/pebilepsy"> Challenge Post</a> , <a href="http://www.medgadget.com/2014/09/pebilepsy-uses-fitness-tracker-to-monitor-night-time-seizures.html" > Med Gadgets </a></div>
                        <div class="techused">Technologies used : Android Development, Pebble API </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="position col-sm-8 job-title" >Game Robot</div> 
                    <div class="company col-sm-4"></div>
                    <div class="col-sm-12 greybackground">
                        <ul>
                            <li>
                                Built a joystick-controlled robot which could retrive objects.
                            </li>
                        </ul>

                        <div class="techused"> Technologies used : RobotC , NXT Mindstorm Robot</div>
                    </div>
                </div>


                <br>
                <div class="row">
                    <div class="position col-sm-8 job-title" >Temperature Map</div> 
                    <div class="company col-sm-4"></div>
                    <div class="col-sm-12 greybackground">
                        <ul>
                            <li>
                               Allows the user to browse map and retrive the current time and temperature of the location the user picks. 
                            </li>
                        </ul>

                        <div class="techused"> Technologies used : Google Map API , Temperature API , jQuery , AJAX</div>
                    </div>
                </div>

                <br>
                <div class="row">
                    <div class="position col-sm-8 job-title" >Exam Schedular</div> 
                    <div class="company col-sm-4"></div>
                    <div class="col-sm-12 greybackground">
                        <ul>
                            <li>
                                Allows a UW Student to view their exam schedule and add it to google calendar.
                            </li>
                        </ul>
                        <div class="techused"> Technologies used :  jQuery , AJAX</div>
                    </div>
                </div>
             </div>

        </div>
        <!-- /.row -->

    </div>
    <!-- /.container -->

    <!-- jQuery Version 1.11.1 -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>

</html>

Answer 1

您需要更改此行：

<link href="css/bootstrap.min.css" rel="stylesheet">

到

<link href="css/bootstrap.min.css" rel="stylesheet" media="print">

因此您的打印机可以读取 Bootstrap 样式。您的内部样式也是如此（尝试使用外部样式 sheet！）。

如果您希望印刷和网络都使用这些样式，请使用

<link href="css/bootstrap.min.css" rel="stylesheet" media="all">

你可以阅读more about media types here

打印 Bootstrap 网站

Printing a Bootstrap website

html

css

twitter-bootstrap

printing