Я переделываю свой веб-сайт с использованием начальной загрузки 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