Блог

Я пытаюсь сделать так, чтобы 1 столбец начальной загрузки перекрывал другой, где один столбец короче другого.

Я не уверен, как этого добиться, это делается bootstrap с использованием offset классов? Как бы я это сделал?

Мой код до сих пор:

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

  <div class="row">
    <div class="col-3" style="background-color: blue; height: 100px;">
      <p>Some text</p>
    </div>
    
    <div class="col-3" style="background-color: orange; height: 200px;">
      <img src="#" class="img-fluid">
    </div>

</div> 

Мне не нравится bootstrap, но я попробовал его с html и CSS, и это сработало, вам просто нужно добавить поле с отрицательным значением (также не забудьте упомянуть, что вы неправильно background-colour ввели его, должно быть background-color .

 
<div class="container">

  <div class="row">
    <div class="col-3" style="background-color: blue; height: 300px;margin-right:-40px;z-index:1">
      <p>Some text</p>
    </div>
    
    <div class="col-3" style="background-color: orange; height: 400px;">
      <img src="#" class="img-fluid">
    </div>

</div>