我正在使用引导程序4修改我的投资组合网站。直到进入项目展示为止，一切似乎都很好。
我有一行应该有两列。一栏包含图片，第二栏包含说明。但是由于某些原因，这些列是垂直堆叠而不是水平堆叠的，我不知道为什么这样做。
我删除了行上方的部分，以查看是否是问题所在，并且各列仍在堆积。我将代码重写为具有简单列的简单行，但仍未解决问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
<title>Jessica perkins Porfolio Page</title>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset ="60">
<!--Header and Nav-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="header-container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home"><span class="fa fa-home fa-lg" aria-hidden="true"></span></a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse-1" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav navbar-right">
<li class="about-nav"><a href="#about-section" class="nav-link" ><i class="fa fa-id-card-o" aria-hidden="true"></i>About<span class="sr-only">(current)</span></a></li>
<li class="skills-nav"><a href="#skills-section" class="nav-link"><i class="far fa window-maximize" aria-hidden="true"></i>Skills</a></li>
<li class="work-nav"><a href="#work-section" class="nav-link"><i class="fa fa-code" aria-hidden="true"></i>Work</a></li>
<li class="contact-nav"><a href="#contact-section" class="nav-link"><i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="bgimg-1">
<div class="header-content" id="home">
<div data-aos="fade-down">
<h1 class="name1">Jessica Perkins</h1>
</div>
<div data-aos="fade-up">
<p class="s-name">Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
</div>
<hr>
<!--Icons-->
<div class="media">
<ul>
<li><a href="https://github.com/jnperk1234" target="_blank" class="github-link"><i
class="fab fa-github-alt fa-3x"></i></a> </li>
<li><a href="https://www.linkedin.com/in/jessica-perkins0304/" target="_blank" class="linkedin-link"><i class="fab fa-linkedin fa-3x"></a></i>
</li>
<li><a href="https://www.facebook.com/jessica.perkins.7965" target="_blank" class="facebook-link"><i class="fab fa-facebook fa-3x"></a></i></li>
<li><a href="https://www.deviantart.com/icysisdee" target="_blank" class="deviantart-link"><i
class="fab fa-deviantart fa-3x"></a></i></li>
<li> <a href="mailto:jnpdesignnarts@gmail.com"><i class="email-link fa fa-envelope-o"
aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div class="down">
<a class="next-page" href="#about-section"><i class="animated pulse infinite fa fa-chevron-circle-down fa-2x"
aria-hidden="true"></i></a>
</div>
</header>
<br>
</div>
<!--AboutMe-->
<div class="container" id="about-section">
<h1>Hi! My is Jessica!</h1>
<br>
<h2>I am <span class="typed"></span></h2>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-xs-12">
<img src="https://via.placeholder.com/300" class="profile-pic">
</div>
<div class="col-sm-6 col-xs-12">
<p class="about me">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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
<br>
<div class="bgimg-2"></div>
<!--Skills-->
<section class="skill- section py-5">
<div class="container">
<h1>Skill Overview</h1>
<h3>What I can do</h3>
<p>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. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="skills-blocks mx-auto pt-5">
<div class="row">
<div class="col-12 col-lg-4 mb-5 mb-lg-0">
<section class="skill-block title-border">
<button type="button" class="btn-circle btn-xl"><i class="fas fa-file-code"></i></button>
<h2 class="text-title-center text-title-text-h2">Test</h2>
<hr>
<ul class="skills-list list-unstyled text-secondary">
<li class="mb-2"><i class="fas fa-check mr-2 text-primary"></i>React</li>
<li class="mb-2"><i class="fas fa-check mr-2 text-primary"></i>Javascript</li>
<li class="mb-2"><i class="fas fa-check mr-2 text-primary"></i>Node.js</li>
<li class="mb-2"><i class="fas fa-check mr-2 text-primary"></i>HTML/CSS/SASS/LESS</li>
</ul>
</section>
</div>
<div class="col-12 col-lg-4 mb-5 mb-lg-0">
<section class="skill-block title-border">
<button type="button" class="btn-circle btn-xl"><i class="fas fa-file-code"></i></button>
<h2 class="text-title-center text-title-text-h2">Test</h2>
<hr>
<ul class="skills-list list-unstyled text-secondary">
<li class="mb-2"><i class="fas fa-check mr-2 text-primary"></i>React</li>
<li class="mb-2"><i class="fas fa-check mr-2 text-primary"></i>Javascript</li>
<li class="mb-2"><i class="fas fa-check mr-2 text-primary"></i>Node.js</li>
<li class="mb-2"><i class="fas fa-check mr-2 text-primary"></i>HTML/CSS/SASS/LESS</li>
</ul>
</section>
</div>
<div class="col-12 col-lg-4 mb-5 mb-lg-0">
<section class="skill-block title-border">
<button type="button" class="btn-circle btn-xl"><i class="fas fa-file-code"></i></button>
<h2 class="text-title-center text-title-text-h2">Test</h2>
<hr>
<ul class="skills-list list-unstyled text-secondary">
<li class="mb-2"><i class="fas fa-check mr-2 text-primary"></i>React</li>
<li class="mb-2"><i class="fas fa-check mr-2 text-primary"></i>Javascript</li>
<li class="mb-2"><i class="fas fa-check mr-2 text-primary"></i>Node.js</li>
<li class="mb-2"><i class="fas fa-check mr-2 text-primary"></i>HTML/CSS/SASS/LESS</li>
</ul>
</section>
</div>
</div>
</div>
</div>
</section>
<!-- <div class="row">
<div class="container">
<div class="col-sm-6">
Test
</div>
<div class="col-sm-6">
Test
</div>
</div> -->
</div>
<div class="container container-work">
<div id="work-section">
<h2 class="work-header">My Projects</h2>
<div class="row">
<div class="container">
<div class="work-sample">
<div class="work-img col-sm-6 col-xs-9 col-xs-offset-1 col-sm-offset-0">
<img src="https://via.placeholder.com/500">
</div>
<div class="work-info col-sm-6 col-xs-9 col-xs-offset-1 col-sm-offset-0">
<h4>Project 1</h4>
<p class="description">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.
Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Just need the columns to align horizontally
答案 0 :(得分：0)
尝试类似
<div class="container">
<h2 class="work-header">My Projects</h2>
<div class="row">
<div class="col-6">
<img class="img-fluid" src="https://via.placeholder.com/500"></img>
</div>
<div class="col-6">
<h4>Project 1</h4>
<p class="description">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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
您的课程有误。应该是container> row> col