0
这是我的自举网站的HTML代码： 如何水平对齐Bootstrap中的两列？
<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="">
<link rel="icon" href="../../favicon.ico">
<title>Yanni Pang</title><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css"><!-- Custom styles for this template -->
<link href="/css/main.css" rel="stylesheet" type="text/css"><!-- Animate CSS -->
<link href="/css/animate.css" rel="stylesheet" type="text/css">
<link href="css/minimalpace.css" type="text/css">
<script src="plugins/pace.min.js" type="text/javascript">
</script>
<link href="css/minimalpace.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script><!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript">
</script><!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js" type="text/javascript">
</script><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-17399906-5', 'auto');
ga('send', 'pageview');
</script><!-- End -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse animated fadeIn">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span></button> <a class="navbar-brand animated slideInLeft" href="/index.html">Yanni Pang</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li class="disabled"><a href="/photos">Photos</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/contact">Contact Me</a></li>
<li><a href="#">test2</a></li>
</ul>
</div>
</div><!-- <ul class="nav nav-pills pull-right">
<li class="navbarpills"><a href="#">Home</a></li>
<li class="disabled"><a href="/photos">Photos</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
</ul> -->
</nav>
<div class="container">
<div class="jumbotron jumbotronothercolor animated fadeIn">
<h1>Welcome to my website!</h1>
<p class="lead">On this site, I will post random stuff!</p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Education</h4>
<p>I am a 9th grade High School student at RMHS. I am teaching myself how to program, and build things.</p>
</div>
<div class="col-lg-6">
<h4>Missions Trips</h4><!-- <ul class="missionslist"> -->
<ul class="missionslist">
<li style="list-style: none; display: inline">
<h5>Grace Chapel</h5>
</li>
<li>Trinidad 2014</li>
<li><a class="animated bounceIn" href="/navajonation">Navajo Nation 2015</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h4>Sports</h4>
<p>I swim competitively for the Reading Rockets Men's Swim Team. I have earned my varsity letter. Here are my records:</p><br>
<p>50 Free: 26.75</p>
<p>100 Breast: 1:17.93</p>
<p>100 Free: 1:01:01</p>
<p>Breath Holding Personal Best: 1:30:57</p>
</div>
<div class="col-lg-6">
<h4>Hobbies</h4>
<p>Swimming</p>
<p>Coding</p>
<p>Making</p>
<p>Photography</p>
</div>
<div class="row">
<div class="col-lg-6 tempspace">
<h4>Coding Experience</h4>
<p>HTML</p>
<p>CSS</p>
<p>Some Java</p>
<p>Some AppleScript</p>
</div>
<div class="col-lg-6">
<h4>Photography Gear</h4>
<p>Canon EOS Rebel t6s</p>
<p>Video Ball Mount Tripod</p>
<p>Canon EF-S 18-135 Lens with Lens Hood</p>
<p>Canon EF 50mm STM</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 social animated fadeIn">
<a href="http://github.com/yannip1234"><span class="fa-stack fa-lg"> </span></a> <a href="http://youtube.com/yannip1234"><span class="fa-stack fa-lg"> </span></a> <a href="http://twitter.com/yannip1234"><span class="fa-stack fa-lg"> </span></a>
</div>
</div>
<footer class="footer">
<p>© Yanni Pang 2014</p><img src="http://iplogger.org/1sF94.jpg">
</footer>
</div><!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js" type="text/javascript">
</script>
</div>
</body>
</html>
这里是我的CSS：
/* Space out content a bit */
body {
background-color: #fff;
color: #000;
}
.jumbotronothercolor {
background: rgba(120, 163,rgba(210, 210, 210, 1)92, 0.79);
}
: : selection {
background: #74ff7d;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,.marketing,.footer,.singlepage {
padding-right: 15px;
padding-left: 15px;
}
/* MoreSpace for text */
.morespace {
padding-left: 80px;
}
.lessspace {
padding-left: 149px;
}
/* Nav Pills */
.nav-pills>li>a {
color: #76a25b;
}
/* End Nav Pills */
/* Text Centered */
.col-lg-12 > a {
text-decoration: none;
}
.col-lg-12 {
text-align: center;
}
.col-lg-12 a:hover {
text-decoration: none;
color: #ff9a00;
transition: .5s;
}
.col-lg-12 a {
text-decoration: none;
color: #76a25b;
transition: .5s;
}
/* Main Body Links */
.col-lg-6 a {
text-decoration: none;
color: #76a25b;
transition: .5s;
}
.col-lg-6 a:hover {
text-decoration: none;
color: #ff9a00;
}
.col-lg-6 {
text-align: center;
}
/* Main Body Links End */
/* Custom page header */
.header {
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
text-align: center;
}
/* Customize container */
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
color: #000;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.header,.marketing,.footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
.tempspace {
margin-top: 50px;
}
.missionslist {
list-style-type: disc;
list-style-position: inside;
margin: 0;
padding: 0;
}
.missionslist h4 {
margin: 0;
padding: 0;
}
/*Navbar*/
.navbar {
border-radius: 0;
}
.navbar-brand {
font-size: 180%;
}
.navbar-inverse .navbar-nav > li > a {
color: #74ff7d;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ff9a00;
}
.navbar-inverse .navbar-brand {
color: white;
}
.navbar-toggle {
border: none;
background: transparent !important;
}
.navbar-toggle:hover {
background: transparent !important;
}
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.2s;
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
/*End*/
/*NavajoNation*/
.singlepage {
border-bottom: 1px solid #e5e5e5;
text-align: center;
}
.navajonation {
font-family: Helvetica;
font-size: 1.2em;
text-align: auto;
line-height: 2em;
}
.navajonationdonate {
padding-top: 20px;
}
.navajocenter {
text-align: center;
}
/*NavajoNation End*/
/*Col Center*/
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}
/*Col Center End*/
.tab {
margin-left: 40px;
}
/* Classes */
.pull-left {
float: left!important;
}
.pull-right {
float: right!important;
}
// Usage as mixins
.element {
}
.another-element {
}
.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent url(http://yannipang.com/images/watermark.png) bottom right no-repeat;
z-index: 1100;
}
这是怎么出现的：
我如何将“摄影装备”和“编码体验”水平对齐，以便像其他人一样平行排列。另外为什么“体育”和“摄影装备”的底部之间有一个很大的空间？这一直在困扰着我一段时间。感谢你的帮助！
只分享相关的代码。我们不能浪费时间阅读所有的代码，并想象问题出在哪里。另一个好处是，你在小提琴上共享代码，而不是链接真实的网站，有很多人无法浏览几页 –