我使用bootstrap创建了我的简历，将列分配到3和9.前3列是所有技能，9列是我的工作经验。现在是时候将网页转换为pdf格式（雇主希望它以pdf a4大小的形式），bootstrap有点组合列。我有以下代码
锚标签是否显示了链接到的页面？我只是希望它看起来与网页完全一样。因此雇主可以点击href链接并转到网站。
有人建议使用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>
答案 0 :(得分：0)
您需要更改此行：
<link href="css/bootstrap.min.css" rel="stylesheet">
到
<link href="css/bootstrap.min.css" rel="stylesheet" media="print">
因此您的打印机可以读取Bootstrap样式。您的内部样式也是如此（尝试使用外部样式表！）。
如果您希望打印和网络都使用这些样式，请使用
<link href="css/bootstrap.min.css" rel="stylesheet" media="all">