Ответы пользователя по тегу Bootstrap
  • Как выровнять иконку в нижний правый угол?

    RomanTRS
    @RomanTRS
    Исходя из фото, это стандартная карточка, со стандартными же элементами:
    .card
      .card__date
      .card__image
      .card__info
        .card__icon

    1. Карточку делаете флекс-контейнером.
    2. Дату, через ордер, отправляете в конец рендеринга.
    3. Инфо, отправляете в начало.
    4. Двум крупным элементам, задаёте нужные размеры и флекс-гроу.
    5. Дата, благодаря флексу, сама подстроится.
    6. Иконка, абсолютно позиционируется, относительно элемента инфо.

    Как-то так

    <div class="card">
      <div class="card__date"><span class="card__day">25</span> april</div>
      <picture class="card__picture">
        <img class="card__image" src="https://unsplash.it/1000/300" alt="">
      </picture>
      <div class="card__info">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sequi enim quia, voluptatibus laborum atque magnam sapiente sint expedita quas! Similique aspernatur quod optio quasi ducimus tempora commodi, maxime vel!</p>
        <button class="card__btn">+</button>
      </div>
    </div>

    *, *::before, *::after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    .card {
      display: flex;
      flex-wrap: wrap;
    }
    .card__date {
      order: 1;
      background-color: yellow;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .card__day {
      font-size: 30px;
    }
    .card__info {
      order: -1;
      position: relative;
      padding: 20px;
    }
    .card__btn {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background: none;
      border: 0;
      font-size: 30px;
    }
    .card__image {
      object-fit: cover;
      display: block;
    }
    .card__picture {
      overflow: hidden;
      display: flex;
      justify-content: center;
    }
    .card__picture,
    .card__info {
      flex-grow: 1;
      flex-basis: 50%;
      flex-shrink: 0;
      background-color: orange;
    }

    Ответ написан
    Комментировать
  • Можно ли открывать row без открытия блока?

    RomanTRS
    @RomanTRS
    Нужно! Это стандартная сетка bootstrap:
    Сначала идет контейнер (.container), внутри него находятся строки (.row), а внутри строк находятся колонки (.col).
    Если внутри колонки требуется создать свою сетку, то добавляете row и внутри него создаете колонки.

    <div class="container">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
      </div>
      <div class="row">
        <div class="col"></div>
        <div class="col">
          <div class="row">
            <div class="col"></div>
            <div class="col"></div>
          </div>
          <div class="row">
            <div class="col"></div>
            <div class="col"></div>
          </div>
        </div>
      </div>
    </div>
    Ответ написан
    Комментировать