Bootstrap позиционирование: Позиция. Утилиты · Bootstrap v5.0.2

html — Позиционирование элементов в bootstrap

Вопрос задан

Изменён 4 года 1 месяц назад

Просмотрен 153 раза

Есть 7 картинок. Мне нужно чтобы 5 картинок были в ряд на одной строке а 2 снизу на другой в центре и тоже в ряд. 5 картинок в ряд у меня получилось сделать, но почему-то не получается сделать 2 снизу в центре и не получается сделать их всех круглыми на 100% в responsive версии. Что не так? Вот html:

 <div>
                    <div>
                        <img src="img/team/1.jpg">
                            <h5>LOrem impsum</h5> 
                            <p>LOrem impsum</p>
                    </div>
                    <div>
                        <img src="img/team/1.
jpg"> <h5>LOrem impsum</h5> <p>LOrem impsum</p> </div> <div> <img src="img/team/1.jpg"> <h5>LOrem impsum</h5> <p>LOrem impsum</p> </div> <div> <img src="img/team/1.jpg"> <h5>LOrem impsum</h5> <p>LOrem impsum</p> </div> <div> <img src="img/team/1.jpg"> <h5>LOrem impsum</h5> <p>LOrem impsum</p> </div> <div> <img src="img/team/1.jpg"> <h5>LOrem impsum</h5> <p>LOrem impsum</p> </div> </div>

Вот css:

. picture-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .ring {
    width: 180px;
    height: 150px;
    margin: 20px;
  }
.ring img {
    border-radius: 100%;
    margin-left: 10px;
}
.picture-box h5, p {
    color: #414141;
    text-align: center;
}
@media all and (max-width: 767px) {
    .ring {
        margin-bottom: 30px;
    }
    .ring img {
        padding: 20px;
    }
    .picture-box h5 {
        text-align: center;
    }
    .picture-box p {
        text-align: center;
    }
}
@media only screen and (max-width: 768px) {
    .picture-box h5, p {
        margin-bottom: -5px;
    }
}
@media all and (max-width: 1024px) {
    .ring img {
        padding-top: 10px;
    }    
}

Использую Bootsrtap4. Если можно без него, то подскажите как, пожалуйста.

  • html
  • css
  • bootstrap
  • responsive

Вот вариант без бутстрапа.

<div>
     <div>
            <img src="img/1. jpg">
    </div>
    <div>
            <img src="img/2.jpg">
    </div>
    <div>
            <img src="img/3.jpg">
    </div>
    <div>
            <img src="img/3.jpg">
    </div>
   <div>
            <img src="img/3.jpg">
    </div>
    <div>
            <img src="img/4.png">
    </div>
    <div>
            <img src="img/5.jpg">
    </div>
</div>  

css

.picture-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .ring {
    width: 200px;
    height: 80px;
    background: green;
    margin: 20px;
  }

5

Если я правильно всё понял, то вот это поможет.

 .ring {
    width: 180px;
    margin: 40px;
    overflow: hidden;
    background: green;
 }
.ring img {
    border-radius: 100%;
    width: 90%;
    margin: 0 auto; 
}

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css — Позиционирование элементов в bootstrap макете

Задать вопрос

Вопрос задан

Изменён 2 года 10 месяцев назад

Просмотрен 47 раз

Всем привет.

Есть следующий небольшой макет:

<div>
                <div>
                    <div>
                        <div>
                            <a>
                                <h3>Money Calculation</h3>
                            </a>
                        </div>
                        <div>
                            <a>
                                <h3>Notebook</h3>
                            </a>
                        </div>
                    </div>
                </div>
                <div>
                    <div>
                        <form>
                            <div>
                                <div>
                                    <input type="text" placeholder="Date">
                                </div>
                                <div>
                                    <input type="text" placeholder="Money">
                                </div>
                            </div>
                        </form>
                        <button type="button">Главный</button>  
                    </div>
                </div>
</div>

Подскажите пожалуйста, как сделать так, чтобы . Header был всегда прижат к верху экрана, а .MainContent всегда был посередине экрана. У меня почему то не получается сделать это, задав классу .main-col display: flex, а флекс элементам(.Header и .MainContent) задав align-self: flex-start и center, соответственно. Стили .main-col:

.main-col {
    max-width: 900px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}
  • css
  • вёрстка
  • flexbox
  • bootstrap4

Добавьте жадности контенту )) Дальше по описанной вами схеме с оберткой

.MainContent {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

6

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Bootstrap Position — примеры и руководство

Position

Используйте эти помощники для быстрой настройки положения элемента.


Основные примеры

Неподвижный верх

Расположите элемент в верхней части окна просмотра, от края до края. Убедитесь, что вы понимаете разветвления фиксированной позиции в вашем проекте; вам может потребоваться добавить дополнительный CSS.

Показать код Изменить в песочнице

            
          <дел>...
          
        
     
Фиксированное дно

Поместите элемент в нижней части окна просмотра, от края до края. Убедитесь, что вы понимаете последствия фиксированной позиции в вашем проекте; вам может потребоваться добавить дополнительный CSS.

Показать код Изменить в песочнице

            
          <дел>. ..
          
        
     
Липучка

Разместите элемент в верхней части области просмотра, от края до края, но только после прокрутки мимо него. Утилита .sticky-top использует позицию CSS : sticky , которая не полностью поддерживается во всех браузерах.

Показать код Изменить в песочнице

            
          <дел>...
          
        
     
Адаптивная липучка

Адаптивные варианты также существуют для утилиты .sticky-top .

Показать код Изменить в песочнице

            
          
Придерживайтесь верхнего края окна просмотра размером SM (маленький) или шире
Придерживайтесь верхнего края окна просмотра размером MD (средний) или шире
Придерживайтесь верхнего края окна просмотра размером LG (большой) или шире
Придерживайтесь верхнего края окна просмотра размером XL (очень большой) или шире

Значения позиции

Доступны классы быстрого позиционирования, но они не реагируют.

Показать код Изменить в песочнице

            
          <дел>...
          <дел>...
          <дел>...
          <дел>...
          <дел>...
          
        
     

Элементы компоновки

Легко располагайте элементы с помощью утилит позиционирования краев. Формат {свойство}-{позиция} .

Где свойство является одним из:

  • верхняя — для вертикальной верхняя позиция
  • левый — для горизонтального левый позиция
  • нижний — для вертикального нижний позиция
  • правая — для горизонтальной правая позиция

Где позиция является одной из:

  • 0 — для 0 положение края
  • 50 — для 50% положение края
  • 100 — для 100% положение края

Вы можете добавить дополнительные значения позиции, добавив записи в $position-values ​​9. 0033 Сасс переменная карты.

Показать код Изменить в песочнице

  • HTML
  • УСБ
            
          <дел>
            <дел>
            <дел>
            <дел>
            <дел>
            <дел>
            <дел>
          
            
          .позиция-относительный-пример {
          высота: 200 пикселей;
          ширина: 100%;
          цвет фона: #f5f5f5;
          }
          .position-relative-example div {
          ширина: 2см;
          высота: 2см;
          цвет фона: #343a40;
          радиус границы: 0,25 бэр;
          }
          
        
     

Центральные элементы

Кроме того, вы также можете центрировать элементы с помощью служебного класса преобразования. .translate-middle .

Этот класс применяет преобразования translateX(-50%) и translateY(-50%) к элементу, который в сочетании с позиционированием края утилиты, позволяет абсолютно центрировать элемент.

Показать код Изменить в песочнице

  • HTML
  • УСБ
            
          <дел>
            <дел>
            <дел>
            <дел>
            <дел>
            <дел>
            <дел>
            <дел>
            <дел>
            <дел>
          
            
          .позиция-относительный-пример {
          высота: 200 пикселей;
          ширина: 100%;
          цвет фона: #f5f5f5;
          }
          . position-relative-example div {
          ширина: 2см;
          высота: 2см;
          цвет фона: #343a40;
          радиус границы: 0,25 бэр;
          }
          
        
     

Дополнительные примеры

Вот несколько реальных примеров этих классов:

Показать код Изменить в песочнице

            
          

Вы можете использовать эти классы с существующими компонентами для создания новых. Помните, что вы можете расширить его функциональность, добавив записи в переменную $position-values ​​.

Показать код Изменить в песочнице

            
          <дел>
            <дел>
              
<тип кнопки="кнопка" > 1 <тип кнопки="кнопка" > 2 <тип кнопки="кнопка" > 3

Подходит для объекта

Это утилита для управления изменением размера содержимого замененного элемента.

Измените размер содержимого элемента, чтобы покрыть его контейнер с помощью .object-cover .

подходит для объекта: крышка;

Показать код Изменить в песочнице

            
          <изображение
           
           
            src="https://mdbootstrap.com/img/new/blog/2.jpeg"
            альт = ""
          />
          
        
     

Позиция объекта

Это инструменты для управления тем, как содержимое замененного элемента должно быть помещено в его контейнер.

Чтобы указать, как содержимое замененного элемента должно быть помещено в его контейнер, используйте классы .object-top , .object-center или .object-bottom .

позиция объекта: сверху;

положение объекта: центр;

положение объекта: снизу;

Показать код Изменить в песочнице

            
          <изображение
           
           
            src="https://mdbootstrap. com/img/new/blog/2.jpeg"
            альт = ""
          />
          <изображение
           
           
            src="https://mdbootstrap.com/img/new/blog/2.jpeg"
            альт = ""
          />
          <изображение
           
           
            src="https://mdbootstrap.com/img/new/blog/2.jpeg"
            альт = ""
          />
          
        
     

Bootstrap Position — примеры и руководство

Position

Примечание: Эта документация предназначена для более старой версии Bootstrap (v.4). А для Bootstrap 5 доступна более новая версия. Мы рекомендуем перейти на последнюю версию нашего продукта — Material Design для Bootstrap 5.
Перейти к документации v.5

Эти сокращенные утилиты полезны для быстрой настройки положения элемента.


Общие значения

Доступны классы быстрого позиционирования, но они не реагируют.

Показать код Изменить в песочнице

            
        <дел>. ..
        <дел>...
        <дел>...
        <дел>...
        <дел>...
      
        
     

Фиксированный верх

Можно быстро расположить элемент в верхней части области просмотра, от края до края. Просто будьте уверены вы понимаете последствия фиксированного положения в вашем проекте; вам может потребоваться добавить дополнительный CSS.

С фиксированной крышкой

Окно просмотра

Показать код Изменить в песочнице

Просмотр в реальном времени

            
        <дел>...
      
        
     

Фиксированное дно

Также легко расположить элемент в нижней части окна просмотра, от края до края. Очередной раз, Пожалуйста, убедитесь, что вы понимаете последствия фиксированного положение в вашем проекте; так как вам может понадобиться добавить дополнительный CSS.

Окно просмотра

Фиксированное дно

Показать код Изменить в песочнице

Просмотр в реальном времени

            
        <дел>...
      
        
     

Липкий верх

Вы можете разместить элемент в верхней части окна просмотра, от края до края, но только после того, как вы прокрутить мимо него. Утилита .sticky-top использует CSS position: sticky , что полностью поддерживается не во всех браузерах.

Microsoft Edge и IE11 будут отображаться позиция: липкая как позиция: относительная . Таким образом, мы оборачиваем стили в @поддерживает запрос , ограничивая прилипание только браузерами, которые могут правильно его отображать.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *