如何在引導網格系統中制作帶有右側文字的垂直導航欄-有解無憂

我正在嘗試學習引導程式，但我遇到了問題。我在網站的左側制作了垂直導航欄，右側應該有文字，但我無法做到這一點。我在網格系統中嘗試了很多代碼和組合來做到這一點。我有什么辦法嗎？

我從互聯網和修改代碼中獲取了 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>

uj5u.com熱心網友回復：

colclasses 需要是rowclass的直接子級。你不能把它包裝在一個不同的類中（沒有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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399987.html

標籤：html css 推特引导 bootstrap-4

上一篇：單擊導航欄切換時，jquerytoggleClass不會切換css類

下一篇：媒體查詢不適用于顯示屬性