Организуйте содержимое DIV с помощью Bootstrap -4

Question

Я не могу найти решение для выравнивания / организации моего содержимого div с Bootstrap. Я не совсем понимаю, как это работает

aling-items- * text- * aling-self- * justify-items- * justify-self- *

Я пытаюсь организовать свои сайт следующим образом:

введите описание изображения здесь

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

Answer 1

Это может помочь вам начать работу:

скрипка для игры

.MainDiv {
  border: 1px solid red;
  height: 210px;
  width: 100%;
  display: flex;
  margin: 5px;
}

.First {
  border: 1px solid blue;
  width: 33%;
  height: 200px;
  display: flex;
  justify-content: flex-start;
  margin: 5px;
}

.FirstSubDiv {
  border: 1px solid green;
  height: 200px;
  width: 50%;
}

.Second {
  border: 1px solid blue;
  width: 33%;
  height: 200px;
  display: flex;
  justify-content: center;
  margin: 5px;
}

.SecondSubDiv {
  border: 1px solid green;
  height: 200px;
  width: 50%;
  text-align: center;
}

.Third {
  border: 1px solid blue;
  width: 33%;
  height: 200px;
  display: flex;
  justify-content: flex-end;
  margin: 5px;
}

.ThirdSubDiv {
  border: 1px solid green;
  height: 200px;
  width: 50%;
  text-align: right;
}

<div class="MainDiv">
  <div class="First">
    <div class="FirstSubDiv">
      contents are in left;
    </div>
  </div>

  <div class="Second">
    <div class="SecondSubDiv">
      contents are in center;
    </div>
  </div>

  <div class="Third">
    <div class="ThirdSubDiv">
      contents are in right;
    </div>
  </div>

</div>

Answer 2

Вся необходимая информация представлена ​​здесь: https://getbootstrap.com/docs/4.5/layout/grid/

Вначале вы можете просто скопировать и вставить Boostrap html и настроить его. Постепенно вы поймете суть этого (после тестирования и пробной версии) и сможете работать над ним самостоятельно.

EDIT https://getbootstrap.com/docs/4.0/utilities/flex/

Посмотреть прикрепленное изображение. Если это то, что вы хотите сделать, перейдите по этой ссылке