Bootstrap: плавающий квадрат вправо (col-md-4), но высота только 200 пикселей?

Question

Я хочу иметь небольшой квадрат, где пользователи могут искать курсы и покупать тот, который находится на текущей странице.

Мне нужно, чтобы он состоял из 4 столбцов, согласно шаблону сетки Boostrap4, но длина должна быть размером около 200 или 300 пикселей. Он должен следовать за пользователем при прокрутке вниз.

Вы можете посетить этот сайт , откуда я черпал вдохновение, чтобы следовать своей идее:

Codepen:

https://codepen.io/ogonzales/pen/QWjmorP

КОД:

В настоящее время я могу получить квадрат, но он фиксируется вверху по мере прокрутки пользователя.

<main role="main" class="container">
        <div class="row">
          <div class="col-md-8">
            /* Blah blah blah */
          </div>
          <div class="col-md-4" id="LocalSide">

            <form class="search-form" action="/search/" method="post">
              <input type="hidden" name="csrfmiddlewaretoken"
                value="KTlYgVaxnAYKzLle9WWDNIoE0MDSvAVldfbsnKbfpAStWafCb1MVMgwLdArZUEiP">
              <div class="form-group">
                <input type="search" class="form-control search-course" placeholder="Buscar curso" name="search_term"
                  required="">
                <input type="hidden" value="3" name="course_id">
              </div>
            </form>

            <h2 class="local-side-heading">In this Section:</h2>
            <nav class="local-nav">
              <ol data-local-nav-list=""></ol>
            </nav>


            <a class="pcta" href="/payments/tdd-flask/" data-a-buy-course-cta="tdd-flask">
              <span class="label label-success">

                <span class="pcta-label">Get the</span>
                <span class="pcta-hook">full course</span>

                <span class="sr-only">for</span>
                <span class="pcta-badge" aria-hidden="true">Now Only</span>
              </span>
              <span class="pcta-price">$30</span>
            </a>



            <a href="#TOP" class="local-side-jump" data-back-to-top="">↑ Back to top</a>
          </div>
        </div>
      </main>

БОНУС:

Я бы хотел получите зеленую стрелку отсюда:

Похоже на Bootstrap Значки и ярлыки, но я использую Bootstrap 4.4.1, и они больше не работают. Если я перейду на Bootstrap 3.4.1, я получу метки, но не стрелку.

Кроме того, я бы хотел использовать версию 4.4.1.

Answer 1

Я добавил несколько CSS и обновил файл HTML. Пожалуйста, проверьте это.

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
}
#LocalSide {
  border-style:solid;
  border-width: thin;
  border-color: #E8E8E8;
  padding: 10px;
  border-top: none;
  border-right:none;
}

.box {
    margin-right: 5px;
    padding: 10px   
}

.pcta-hook {
font-size:25px;
    font-weight: 200;
}

span.pcta-label {
font-size:25px;
    font-weight: 200;

}
.pcta-price {
  font-size: 50px;
    font-weight: 600;
}

.green {
background-color: #00FF4D;
    color: white;
    font-size:15px;
    padding: 3px;
    z-index: 99;
    position: relative;
}



.triangle{
   width: 0;
    height: 0;
    border-width: 10px 0 10px 36px;
    border-color: transparent transparent transparent #00FF4D;
    border-style: solid;
    float: right;
    top: 1px;
   position: relative;
    right: 18px;
    z-index: 5;


}

.arrow {


  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);

}

.blockHead:after {
  color: #4D81BF;
  border-left: 20px solid;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  display: inline-block;
  content: '';
  position: absolute;
  right: -19px;
  top: 0;
}
.blockHead {
  background-color: #4D81BF;
  /*width: 150px; */
  display: inline-block;
  position: relative;
}
.blocktext {
  color: white;
  font-weight: bold;
  padding-left: 10px;
  font-family: Arial;
  font-size: 11;
}



@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px; /* Margin bottom by footer height */
  font-family: 'Poppins', sans-serif;
  background: #fafafa;
  padding-top: 70px;
}

.label { border-radius: 0; text-shadow: none; font-size: 11px; font-weight: normal; padding: 3px 5px 3px; background-color: #abbac3!important }
.label[class*="span"][class*="arrow"] { min-height: 0 }

.container {
  max-width: 960px;
}

.pricing-header {
  max-width: 700px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 80%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}



/* NAVBAR TOP */

#top-navbar ul li.active>a
a[aria-expanded="true"] {
  color: #1f1f1f;
  background: #12b556;
}

#top-navbar a:visited {
  color: #fff;
}

#top-navbar a:link {
  color: #fff;
}

#top-navbar a.subitem:link {
  color: #1f1f1f;
}

/* ==== */


/* SIDEBAR */
/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
  display: flex;
  align-items: stretch;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  background: #1f1f1f;
  color: #fff;
  transition: all 0.3s;
}

#sidebar.active {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}

#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
  display: none;
}

#sidebar.active .sidebar-header strong {
  display: block;
}

#sidebar ul li a {
  text-align: left;
}

#sidebar.active ul li a {
  padding: 20px 10px;
  text-align: center;
  font-size: 0.85em;
}

#sidebar.active ul li a i {
  margin-right: 0;
  display: block;
  font-size: 1.8em;
  margin-bottom: 5px;
}

#sidebar.active ul ul a {
  padding: 10px !important;
}

#sidebar.active .dropdown-toggle::after {
  top: auto;
  bottom: 10px;
  right: 50%;
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
}

#sidebar .sidebar-header {
  padding: 20px;
  background: #1f1f1f;
}

#sidebar .sidebar-header strong {
  display: none;
  font-size: 1.8em;
}

#sidebar ul.components {
  padding: 20px 0;
  border-bottom: 1px solid #47748b;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
}

#sidebar ul li a:hover {
  color: #12b556;
  background: #fff;
}

#sidebar ul li a i {
  margin-right: 10px;
}

#sidebar ul li.active>a.sidebar-link
a[aria-expanded="true"] {
  color: #fff;
  background: #12b556;
}

a[data-toggle="collapse"] {
  position: relative;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #12b556;
}

ul.CTAs {
  padding: 20px;
}

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}

a.download {
  background: #fff;
  color: #12b556;
}

a.article,
a.article:hover {
  background: #12b556 !important;
  color: #fff !important;
}


a.sidebar-link:visited {
  color: #fff;
}

a.sidebar-link:link {
  color: #fff;
}

/* ---------------------------------------------------
  CONTENT STYLE
----------------------------------------------------- */

#content {
  width: 100%;
  padding: 20px;
  min-height: 100vh;
  transition: all 0.3s;
}

/* ---------------------------------------------------
  MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
  #sidebar {
      min-width: 80px;
      max-width: 80px;
      text-align: center;
      margin-left: -80px !important;
  }
  .dropdown-toggle::after {
      top: auto;
      bottom: 10px;
      right: 50%;
      -webkit-transform: translateX(50%);
      -ms-transform: translateX(50%);
      transform: translateX(50%);
  }
  #sidebar.active {
      margin-left: 0 !important;
  }
  #sidebar .sidebar-header h3,
  #sidebar .CTAs {
      display: none;
  }
  #sidebar .sidebar-header strong {
      display: block;
  }
  #sidebar ul li a {
      padding: 20px 10px;
  }
  #sidebar ul li a span {
      font-size: 0.85em;
  }
  #sidebar ul li a i {
      margin-right: 0;
      display: block;
  }
  #sidebar ul ul a {
      padding: 10px !important;
  }
  #sidebar ul li a i {
      font-size: 1.3em;
  }
  #sidebar {
      margin-left: 0;
  }
  #sidebarCollapse span {
      display: none;
  }
}

    <main role="main" class="container">
          <div class="row">
            <div class="col-md-8">
              {% block content %}
              {% endblock content %}
            </div>
            <div class="col-md-4 float-right" id="LocalSide">

              <form class="search-form" action="/search/" method="post">
                <input type="hidden" name="csrfmiddlewaretoken"
                  value="KTlYgVaxnAYKzLle9WWDNIoE0MDSvAVldfbsnKbfpAStWafCb1MVMgwLdArZUEiP">
                <div class="form-group">
                  <input type="search" class="form-control search-course" placeholder="Buscar curso" name="search_term"
                    required="">
                  <input type="hidden" value="3" name="course_id">
                </div>
              </form>

              <h2 class="local-side-heading">In this Section:</h2>
              <nav class="local-nav">
                <ol data-local-nav-list=""></ol>
                </nav>
<div class="row">
  <div class="box">
 <span class="pcta-label">Get the </span><br>
  <span class="pcta-hook">full course</span> <br>
      <span class="green" >ABC Team </span> <div class="triangle"> </div>
    </div>
          <div class="box">      

              <span class="pcta-price">$30</span> </div>
  </div>



             <div class="mt-3"> <a href="#TOP" class="local-side-jump " data-back-to-top="">↑ Back to top</a> </div> 
            </div>
          </div>
        </main>


        <footer class="footer">
          <div class="container">
            <span class="text-muted">Footer...</span>
          </div>
        </footer>

      </div>
    </div>

Пожалуйста, перейдите по этой JS ссылке Fiddle и дайте мне знать, было ли это полезно или нет?

https://jsfiddle.net/hilalrehan/bu96yh17/1/