Блог

Главная - Вопросы по программированию - Как разместить «карточки» над страницей в Bootstrap 4?

Как разместить «карточки» над страницей в Bootstrap 4?

#css #layout #bootstrap-4 #overlay

#css #макет #bootstrap-4 #наложение

Вопрос:

У меня есть .ejs/.html настройка страницы с помощью Bootstrap 4. Это стандартная страница «входа», которая отображает форму в середине интерфейса. Он взят из шаблона пользовательского интерфейса, свободно доступного в Интернете, краткое описание выглядит следующим образом:

 <body>

<h1 class="heads">Sign-In</h1>

 <div class="container" style="z-index: 1;">
  <div class="page-header header-filter" style="background-image: url('../assets/img/bg7.jpg'); background-size: cover; background-position: top center;">

   <div class="container">
    <div class="row">

     <div class="col-lg-4 col-md-6 ml-auto mr-auto">
      <div class="card card-login">

       <form class="was-validated" action="/form_handle" method="post">

       //inputs for credentials

       </form>

      </div>
     </div>

    </div>
   </div>

  </div>

  <footer class="footer">
  //stuff
  </footer>

 </div>

Я пытаюсь разместить некоторые «карточки», которые должны отображаться «поверх» отображения страницы. Они должны быть в виде столбцов вдоль «левой» части интерфейса. Я могу разместить карточки, однако по какой-то причине они расположены неравномерно по вертикали. Кроме того, моя «форма», которая ранее была центрирована, вместо этого становится «сжатой», как будто на нее влияют «карточки». Вот код с добавленными тремя «карточками»:

     <body>

    <h1 class="heads">Sign-In</h1>

     <div class="container" style="z-index: 1;">
      <div class="page-header header-filter" style="background-image: url('../assets/img/bg7.jpg'); background-size: cover; background-position: top center;">

<div class="column">
<div class="w-50"> 
    <div class="card" style="z-index: 2; height: auto;">
      <div class="card-header">
        <h4 class="card-title">Regular header</h4>
        <p class="category">Category subtitle</p>
      </div>
      <div class="card-body">
        The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
      </div>
    </div>

</br>

    <div class="card" style="z-index: 2; height: auto;">
      <div class="card-header">
        <h4 class="card-title">Regular header</h4>
        <p class="category">Category subtitle</p>
      </div>
      <div class="card-body">
        The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
      </div>
    </div>

    <div class="card" style="z-index: 2; height: auto;">
      <div class="card-header">
        <h4 class="card-title">Regular header</h4>
        <p class="category">Category subtitle</p>
      </div>
      <div class="card-body">
        The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona...
      </div>
    </div>

</div>
</div>

       <div class="container">
        <div class="row">

         <div class="col-lg-4 col-md-6 ml-auto mr-auto">
          <div class="card card-login">

           <form class="was-validated" action="/form_handle" method="post">

           //inputs for credentials

           </form>

          </div>
         </div>

        </div>
       </div>

      </div>

      <footer class="footer">
      //stuff
      </footer>

     </div>

   </body>

Я был бы признателен за любые советы о том, как правильно это сделать. Как видно из кода, я подумал, что способ добиться этого — использовать «ось z» …?
Единственный другой способ, о котором я могу думать, — это разместить каждую «карточку» с «абсолютным» позиционированием, например, «карта 1» 10% с «левой стороны», 25% с «верха» … «карта 2» 10% с «левой стороны», 50% с»top» … «card 3» 10% от «левой стороны», 75% от «top». Однако я не уверен, возможно ли абсолютное позиционирование в Bootstrap из-за системы сетки …? Заранее благодарю. С уважением.