需要帮助在行中定位两列
Need help positioning two columns in row
我正在使用 bootstrap 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
试试
<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>
你的类错了。应该是容器>行>列
我正在使用 bootstrap 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
试试
<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>
你的类错了。应该是容器>行>列