如何在 bootstrap 网格系统中制作带有文字右侧的垂直导航栏
How to make vertical navbar with writings right side in bootstrap grid system
我正在努力学习 bootstrap，但我遇到了问题。我在网站的左侧制作了垂直导航栏，右侧应该有文字，但我做不到。我尝试了很多代码和组合来在网格系统中做到这一点。我有什么办法吗？
我从互联网上获取了 css 和 html 并修改了代码。
body {
font-family: "Poppins", Arial, sans-serif;
font-size: 14px;
line-height: 1.8;
font-weight: normal;
background: #fafafa;
color: gray; }
a {
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
color: #f8b739; }
a:hover, a:focus {
text-decoration: none !important;
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none; }
button {
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease; }
button:hover, button:focus {
text-decoration: none !important;
outline: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important; }
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
line-height: 1.5;
font-weight: 400;
font-family: "Poppins", Arial, sans-serif;
color: #000; }
.ftco-section {
padding: 7em 0; }
.ftco-no-pt {
padding-top: 0; }
.ftco-no-pb {
padding-bottom: 0; }
.heading-section {
font-size: 28px;
color: #000; }
.heading-section small {
font-size: 18px; }
.img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }
.navbar-btn {
-webkit-box-shadow: none;
box-shadow: none;
outline: none !important;
border: none; }
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0; }
.wrapper {
width: 100%; }
#sidebar {
min-width: 175px;
max-width: 250px;
background: #1d1919;
color: #fff;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
#sidebar.active {
margin-left: -300px; }
#sidebar .logo {
display: block;
width: 175px;
height: 175px;
margin: 0 auto; }
#sidebar .logo span {
display: block; }
#sidebar ul.components {
padding: 0; }
#sidebar ul li {
font-size: 16px; }
#sidebar ul li > ul {
margin-left: 10px; }
#sidebar ul li > ul li {
font-size: 14px; }
#sidebar ul li a {
padding: 10px 0;
display: block;
color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#sidebar ul li a:hover {
color: #f8b739; }
#sidebar ul li.active > a {
background: transparent;
color: #f8b739; }
@media (max-width: 991.98px) {
#sidebar {
margin-left: -200px; }
#sidebar.active {
margin-left: 0; } }
a[data-toggle="collapse"] {
position: relative; }
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.btn.btn-primary {
background: #f8b739;
border-color: #f8b739; }
.btn.btn-primary:hover, .btn.btn-primary:focus {
background: #f8b739 !important;
border-color: #f8b739 !important; }
.footer p {
color: rgba(255, 255, 255, 0.5); }
h2.headertext {
text-align: center;
}
body, html {
height: 100%;
}
html,
body,
header,
#intro {
height: 100%;
}
#intro {
background: url("./images/backgr.jpg")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<!doctype html>
<html lang="en">
<head>
<title>Çakır</title>
<meta charset="utf-8">
<meta name="viewport">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cs">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="intro" class="view">
<div class="mask"></div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="border: 1px solid red">
<div class="wrapper">
<nav id="sidebar" class="navbar-dark bg-dark" !important>
<div class="p-4 pt-5">
<a href="#Anasayfa" class="img logo mb-5" style="background-image: url(images/logo.jpg);"></a>
<ul class="list-unstyled components mb-5">
<a href="#Anasayfa">Ana Sayfa</a>
<ul id="AnaSayfa">
</ul>
<li>
<a href="#satisnoktalari">Satış Noktaları</a>
</li>
<li>
<a href="#Teknikozellikler">Teknik Özellikler</a>
<ul id="TeknikÖzellikler">
</ul>
</li>
<li>
<a href="#hakkinda">Hakkında</a>
</li>
</ul>
<div class=" footer align-self-end ">
<p>
Sipariş:0(325)435 80 93
Kurumsal:0(850)288 44 78
Fax:0(328)578 00 54
</p>
<p>Gazi Mah. Çıkmaz Sk. ÇANKAYA/ANKARA</p>
</div>
</div>
</nav>
</div>
</div>
<div class="wrapper">
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10" style="border: 1px solid red">
<h2 class=" headertext text-black">HAKKINDA</h2>
<p class="text-black">
Lorem ipsum dolor sit amet, consectetur adipisicing 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.Lorem ipsum dolor sit amet, consectetur adipisicing 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>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
col classes 需要是 row class 的直接子代。您不能将其包装在不同的 class 中（没有 row class）。您的 col-2 在 row 之下，但 col-10 不在。交换第二个 wrapper 和 col-10 classes。您的代码将起作用。
此外，如果您想要在所有屏幕上使用 2-10 栏布局，则不需要 col-xs-2 col-sm-2 col-md-2 col-lg-2 和 col-xs-10 col-sm-10 col-md-10 col-lg-10。只写 col-2 和 col-10 就可以了。它将在所有屏幕尺寸上采用 2-10 布局。
body {
font-family: "Poppins", Arial, sans-serif;
font-size: 14px;
line-height: 1.8;
font-weight: normal;
background: #fafafa;
color: gray; }
a {
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
color: #f8b739; }
a:hover, a:focus {
text-decoration: none !important;
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none; }
button {
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease; }
button:hover, button:focus {
text-decoration: none !important;
outline: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important; }
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
line-height: 1.5;
font-weight: 400;
font-family: "Poppins", Arial, sans-serif;
color: #000; }
.ftco-section {
padding: 7em 0; }
.ftco-no-pt {
padding-top: 0; }
.ftco-no-pb {
padding-bottom: 0; }
.heading-section {
font-size: 28px;
color: #000; }
.heading-section small {
font-size: 18px; }
.img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }
.navbar-btn {
-webkit-box-shadow: none;
box-shadow: none;
outline: none !important;
border: none; }
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0; }
.wrapper {
width: 100%; }
#sidebar {
min-width: 175px;
max-width: 250px;
background: #1d1919;
color: #fff;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
#sidebar.active {
margin-left: -300px; }
#sidebar .logo {
display: block;
width: 175px;
height: 175px;
margin: 0 auto; }
#sidebar .logo span {
display: block; }
#sidebar ul.components {
padding: 0; }
#sidebar ul li {
font-size: 16px; }
#sidebar ul li > ul {
margin-left: 10px; }
#sidebar ul li > ul li {
font-size: 14px; }
#sidebar ul li a {
padding: 10px 0;
display: block;
color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#sidebar ul li a:hover {
color: #f8b739; }
#sidebar ul li.active > a {
background: transparent;
color: #f8b739; }
@media (max-width: 991.98px) {
#sidebar {
margin-left: -200px; }
#sidebar.active {
margin-left: 0; } }
a[data-toggle="collapse"] {
position: relative; }
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.btn.btn-primary {
background: #f8b739;
border-color: #f8b739; }
.btn.btn-primary:hover, .btn.btn-primary:focus {
background: #f8b739 !important;
border-color: #f8b739 !important; }
.footer p {
color: rgba(255, 255, 255, 0.5); }
h2.headertext {
text-align: center;
}
body, html {
height: 100%;
}
html,
body,
header,
#intro {
height: 100%;
}
#intro {
background: url("./images/backgr.jpg")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<!doctype html>
<html lang="en">
<head>
<title>Çakır</title>
<meta charset="utf-8">
<meta name="viewport">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cs">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="intro" class="view">
<div class="mask"></div>
<div class="container-fluid">
<div class="row">
<div class="col-2" style="border: 1px solid red">
<div class="wrapper">
<nav id="sidebar" class="navbar-dark bg-dark" !important>
<div class="p-4 pt-5">
<a href="#Anasayfa" class="img logo mb-5" style="background-image: url(images/logo.jpg);"></a>
<ul class="list-unstyled components mb-5">
<a href="#Anasayfa">Ana Sayfa</a>
<ul id="AnaSayfa">
</ul>
<li>
<a href="#satisnoktalari">Satış Noktaları</a>
</li>
<li>
<a href="#Teknikozellikler">Teknik Özellikler</a>
<ul id="TeknikÖzellikler">
</ul>
</li>
<li>
<a href="#hakkinda">Hakkında</a>
</li>
</ul>
<div class=" footer align-self-end ">
<p>
Sipariş:0(325)435 80 93
Kurumsal:0(850)288 44 78
Fax:0(328)578 00 54
</p>
<p>Gazi Mah. Çıkmaz Sk. ÇANKAYA/ANKARA</p>
</div>
</div>
</nav>
</div>
</div>
<div class="col-10" style="border: 1px solid red">
<div class="wrapper">
<h2 class=" headertext text-black">HAKKINDA</h2>
<p class="text-black">
Lorem ipsum dolor sit amet, consectetur adipisicing 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.Lorem ipsum dolor sit amet, consectetur adipisicing 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>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
我正在努力学习 bootstrap，但我遇到了问题。我在网站的左侧制作了垂直导航栏，右侧应该有文字，但我做不到。我尝试了很多代码和组合来在网格系统中做到这一点。我有什么办法吗？
我从互联网上获取了 css 和 html 并修改了代码。
body {
font-family: "Poppins", Arial, sans-serif;
font-size: 14px;
line-height: 1.8;
font-weight: normal;
background: #fafafa;
color: gray; }
a {
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
color: #f8b739; }
a:hover, a:focus {
text-decoration: none !important;
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none; }
button {
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease; }
button:hover, button:focus {
text-decoration: none !important;
outline: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important; }
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
line-height: 1.5;
font-weight: 400;
font-family: "Poppins", Arial, sans-serif;
color: #000; }
.ftco-section {
padding: 7em 0; }
.ftco-no-pt {
padding-top: 0; }
.ftco-no-pb {
padding-bottom: 0; }
.heading-section {
font-size: 28px;
color: #000; }
.heading-section small {
font-size: 18px; }
.img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }
.navbar-btn {
-webkit-box-shadow: none;
box-shadow: none;
outline: none !important;
border: none; }
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0; }
.wrapper {
width: 100%; }
#sidebar {
min-width: 175px;
max-width: 250px;
background: #1d1919;
color: #fff;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
#sidebar.active {
margin-left: -300px; }
#sidebar .logo {
display: block;
width: 175px;
height: 175px;
margin: 0 auto; }
#sidebar .logo span {
display: block; }
#sidebar ul.components {
padding: 0; }
#sidebar ul li {
font-size: 16px; }
#sidebar ul li > ul {
margin-left: 10px; }
#sidebar ul li > ul li {
font-size: 14px; }
#sidebar ul li a {
padding: 10px 0;
display: block;
color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#sidebar ul li a:hover {
color: #f8b739; }
#sidebar ul li.active > a {
background: transparent;
color: #f8b739; }
@media (max-width: 991.98px) {
#sidebar {
margin-left: -200px; }
#sidebar.active {
margin-left: 0; } }
a[data-toggle="collapse"] {
position: relative; }
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.btn.btn-primary {
background: #f8b739;
border-color: #f8b739; }
.btn.btn-primary:hover, .btn.btn-primary:focus {
background: #f8b739 !important;
border-color: #f8b739 !important; }
.footer p {
color: rgba(255, 255, 255, 0.5); }
h2.headertext {
text-align: center;
}
body, html {
height: 100%;
}
html,
body,
header,
#intro {
height: 100%;
}
#intro {
background: url("./images/backgr.jpg")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<!doctype html>
<html lang="en">
<head>
<title>Çakır</title>
<meta charset="utf-8">
<meta name="viewport">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cs">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="intro" class="view">
<div class="mask"></div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="border: 1px solid red">
<div class="wrapper">
<nav id="sidebar" class="navbar-dark bg-dark" !important>
<div class="p-4 pt-5">
<a href="#Anasayfa" class="img logo mb-5" style="background-image: url(images/logo.jpg);"></a>
<ul class="list-unstyled components mb-5">
<a href="#Anasayfa">Ana Sayfa</a>
<ul id="AnaSayfa">
</ul>
<li>
<a href="#satisnoktalari">Satış Noktaları</a>
</li>
<li>
<a href="#Teknikozellikler">Teknik Özellikler</a>
<ul id="TeknikÖzellikler">
</ul>
</li>
<li>
<a href="#hakkinda">Hakkında</a>
</li>
</ul>
<div class=" footer align-self-end ">
<p>
Sipariş:0(325)435 80 93
Kurumsal:0(850)288 44 78
Fax:0(328)578 00 54
</p>
<p>Gazi Mah. Çıkmaz Sk. ÇANKAYA/ANKARA</p>
</div>
</div>
</nav>
</div>
</div>
<div class="wrapper">
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10" style="border: 1px solid red">
<h2 class=" headertext text-black">HAKKINDA</h2>
<p class="text-black">
Lorem ipsum dolor sit amet, consectetur adipisicing 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.Lorem ipsum dolor sit amet, consectetur adipisicing 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>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
col classes 需要是 row class 的直接子代。您不能将其包装在不同的 class 中（没有 row class）。您的 col-2 在 row 之下，但 col-10 不在。交换第二个 wrapper 和 col-10 classes。您的代码将起作用。
此外，如果您想要在所有屏幕上使用 2-10 栏布局，则不需要 col-xs-2 col-sm-2 col-md-2 col-lg-2 和 col-xs-10 col-sm-10 col-md-10 col-lg-10。只写 col-2 和 col-10 就可以了。它将在所有屏幕尺寸上采用 2-10 布局。
body {
font-family: "Poppins", Arial, sans-serif;
font-size: 14px;
line-height: 1.8;
font-weight: normal;
background: #fafafa;
color: gray; }
a {
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
color: #f8b739; }
a:hover, a:focus {
text-decoration: none !important;
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none; }
button {
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease; }
button:hover, button:focus {
text-decoration: none !important;
outline: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important; }
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
line-height: 1.5;
font-weight: 400;
font-family: "Poppins", Arial, sans-serif;
color: #000; }
.ftco-section {
padding: 7em 0; }
.ftco-no-pt {
padding-top: 0; }
.ftco-no-pb {
padding-bottom: 0; }
.heading-section {
font-size: 28px;
color: #000; }
.heading-section small {
font-size: 18px; }
.img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }
.navbar-btn {
-webkit-box-shadow: none;
box-shadow: none;
outline: none !important;
border: none; }
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0; }
.wrapper {
width: 100%; }
#sidebar {
min-width: 175px;
max-width: 250px;
background: #1d1919;
color: #fff;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
#sidebar.active {
margin-left: -300px; }
#sidebar .logo {
display: block;
width: 175px;
height: 175px;
margin: 0 auto; }
#sidebar .logo span {
display: block; }
#sidebar ul.components {
padding: 0; }
#sidebar ul li {
font-size: 16px; }
#sidebar ul li > ul {
margin-left: 10px; }
#sidebar ul li > ul li {
font-size: 14px; }
#sidebar ul li a {
padding: 10px 0;
display: block;
color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#sidebar ul li a:hover {
color: #f8b739; }
#sidebar ul li.active > a {
background: transparent;
color: #f8b739; }
@media (max-width: 991.98px) {
#sidebar {
margin-left: -200px; }
#sidebar.active {
margin-left: 0; } }
a[data-toggle="collapse"] {
position: relative; }
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.btn.btn-primary {
background: #f8b739;
border-color: #f8b739; }
.btn.btn-primary:hover, .btn.btn-primary:focus {
background: #f8b739 !important;
border-color: #f8b739 !important; }
.footer p {
color: rgba(255, 255, 255, 0.5); }
h2.headertext {
text-align: center;
}
body, html {
height: 100%;
}
html,
body,
header,
#intro {
height: 100%;
}
#intro {
background: url("./images/backgr.jpg")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<!doctype html>
<html lang="en">
<head>
<title>Çakır</title>
<meta charset="utf-8">
<meta name="viewport">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cs">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="intro" class="view">
<div class="mask"></div>
<div class="container-fluid">
<div class="row">
<div class="col-2" style="border: 1px solid red">
<div class="wrapper">
<nav id="sidebar" class="navbar-dark bg-dark" !important>
<div class="p-4 pt-5">
<a href="#Anasayfa" class="img logo mb-5" style="background-image: url(images/logo.jpg);"></a>
<ul class="list-unstyled components mb-5">
<a href="#Anasayfa">Ana Sayfa</a>
<ul id="AnaSayfa">
</ul>
<li>
<a href="#satisnoktalari">Satış Noktaları</a>
</li>
<li>
<a href="#Teknikozellikler">Teknik Özellikler</a>
<ul id="TeknikÖzellikler">
</ul>
</li>
<li>
<a href="#hakkinda">Hakkında</a>
</li>
</ul>
<div class=" footer align-self-end ">
<p>
Sipariş:0(325)435 80 93
Kurumsal:0(850)288 44 78
Fax:0(328)578 00 54
</p>
<p>Gazi Mah. Çıkmaz Sk. ÇANKAYA/ANKARA</p>
</div>
</div>
</nav>
</div>
</div>
<div class="col-10" style="border: 1px solid red">
<div class="wrapper">
<h2 class=" headertext text-black">HAKKINDA</h2>
<p class="text-black">
Lorem ipsum dolor sit amet, consectetur adipisicing 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.Lorem ipsum dolor sit amet, consectetur adipisicing 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>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>