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

Содержание

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

Вопрос задан 4 года 1 месяц назад

Изменён 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;
  }

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

 .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 месяцев назад

Изменён 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;
}

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

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

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

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

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

Почта

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

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

Почта

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

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

Position

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

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

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

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