Перекрыть два деления в Bootstrap - PullRequest
Новая
       11

Перекрыть два деления в Bootstrap

0 голосов
/ 04 марта 2020

Я видел много вопросов и ответов в Stackoverflow, но не получил решения !!

enter image description here

На изображении выше - мой желаемый дизайн. container из Bootstrap. И в нем будет два div с полной шириной container. Их ширина не имеет значения, как col-md-7 и col-md-5 и прочее.

Я пробовал некоторые: 

<div class="container">

     <div class="row">
          <div class="col-md-6">
               <div class="FirstDIV">
                    abcd
                </div>
          </div>

          <div class="col-md-6 overlay-text">
              <img src="#" height="auto" class="w-100"/>
              <button>Abc</button>
          </div>

     </div>
</div>
.overlay-text {
  align-self: flex-start;
  padding:20px;
  margin-top: 5%;
}

.FirstDIV {
  background-color: #FDC9B3;
  transform: translateX(15%); 
  height: 200px;
}


.overlay-text {
  align-self: flex-start;
  padding:20px;
  margin-top: 5%;
}

.FirstDIV {
  background-color: #FDC9B3;
  transform: translateX(15%); 
  height: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>

<div class="container">

     <div class="row">
          <div class="col-md-6">
               <div class="FirstDIV">
                    abcd
                </div>
          </div>

          <div class="col-md-6 overlay-text">
              <img src="https://d1v3slut4s2mfy.cloudfront.net/4febbf2819ab561801f175b47cf75b3413985518/assets/images/quote-video-placeholder.jpg" height="auto" class="w-100"/>
              <button>Abc</button>
          </div>

     </div>
</div>

https://jsfiddle.net/n8cj4o3d/

В основном transform: translateX(15%); создает проблему.

Ответы [ 3 ]

0 голосов
/ 04 марта 2020

Не берите их обоих в row. 

<div class="overlay-text">
     <img src="#" height="auto" class="w-100"/>
     <button>Abc</button>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="FirstDIV">
             abcd
        </div>
    </div>
</div>


.overlay-text {
  position: absolute;
  padding:20px;
  right: 0;
  bottom: 0;
  top: 10%;
  width: 60%;
}

https://jsfiddle.net/41v5Lde8/

0 голосов
/ 04 марта 2020

Вы можете сделать так же, указав позицию: относительно родительского div 

.overlay-text {
  position: absolute;
  right: 0;
  transform: translate(50%, 20%);
  width: 500px;
  height: 500px;
  z-index: 9999;
}

.FirstDIV {
  position: relative;
  background-color: #FDC9B3;
  height: 500px;
  width: 500px;
}

img {
  object-fit: cover;
  background-color: #FDC9B3;
  height: 500px;
  width: 500px;
}
<div class="container">

  <div class="row">
    <div class="col-md-6">
      <div class="FirstDIV">
        abcd
        <div class="overlay-text">
          <img src="https://d1v3slut4s2mfy.cloudfront.net/4febbf2819ab561801f175b47cf75b3413985518/assets/images/quote-video-placeholder.jpg" height="auto" class="w-100" />
          <button>Abc</button>
        </div>
      </div>
    </div>
  </div>
</div>
0 голосов
/ 04 марта 2020

Добавить position: relative к элементу контейнера. А затем добавьте position: absolute к дочерним элементам div. Теперь вы можете расположить дочерние элементы в любом месте, используя свойства top, left, right, bottom.

...