如何在引导网格系统中使用右侧的文字制作垂直导航栏答案

【问题标题】：How to make vertical navbar with writings right side in bootstrap grid system如何在引导网格系统中使用右侧的文字制作垂直导航栏
【发布时间】：2022-01-01 05:00:34
【问题描述】：

我正在尝试学习引导程序，但我遇到了问题。我在网站左侧制作了垂直导航栏，右侧应该有文字，但我做不到。我尝试了很多代码和组合来在网格系统中做到这一点。我有什么办法吗？

我从互联网和修改代码中获取了 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>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

col 类必须是 row 类的直接子级。您不能将其包装在不同的类中（没有 row 类）。你的col-2 在row 之下，但col-10 不在。交换第二个 wrapper 和 col-10 类。您的代码将起作用。

此外，如果您希望在所有屏幕上都有 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>

【讨论】：