【发布时间】：2015-01-10 19:48:14
【问题描述】：
我使用 bootstrap 创建了我的简历，将列分为 3 和 9。前 3 列是所有技能，9 列是我的工作经验。现在是时候将网页转换为 pdf 格式（雇主希望它是 pdf a4 大小的），引导程序有点结合了这些列。我有下面的代码
锚标记也显示它链接到的页面吗？我只是希望它看起来与网页一模一样。所以雇主可以点击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>
【问题讨论】：
标签： html css twitter-bootstrap printing