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

Содержание

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

Есть 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

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

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

Почта

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

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

Почта

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

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

html — Абсолютное позиционирование и Bootstrap сетка

Вопрос задан 5 лет 8 месяцев назад

Изменён 5 лет 8 месяцев назад

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

Здравствуйте, необходимо спозиционировать . submenu абсолютно, но при задании атрибута left по величине близком к размерам .col-md-3, видимо родительский bootstrap контейнер .col-md-3 ограничивает ширину элемента до минимальной. Необходимо, чтобы ширина «абсолютного» блока формировалась исходя из контента. Как это сделать? примерная картина

<div>
<div>
    <div>
        <div>
            <div>menu</div>
            <ul>
                <li>
                    <a href="#">Item #111</a>
                    <ul>
                        <li><a href="#">subitem 001 sdfsdfsdfs</a></li>
                        <li><a href="#">subitem 002</a></li>
                        <li><a href="#">subitem 003</a></li>
                    </ul>
                </li>
                <li><a href="#">Item #111</a></li>
            </ul>

полная картина: https://jsfiddle. net/9m6ahw1n/

html
css
вёрстка
bootstrap

Я правильно понял что вам надо было полный код https://jsfiddle.net/9m6ahw1n/2/ ?

<div>
<div>
    <div>
        <div>
            <div>menu</div>
            <ul>
                <li>
                    <a href="#">Item #111</a>
                    <ul>
                        <li><a href="#">subitem 001 sdfsdfsdfs</a></li>
                        <li><a href="#">subitem 002</a></li>
                        <li><a href="#">subitem 003</a></li>
                    </ul>
                </li>
                <li><a href="#">Item #111</a></li>
            </ul>
        </div>
    </div>
    <div></div>
</div>

UPD Вариант 2 https://jsfiddle.net/9m6ahw1n/6/

.submenu {
position: absolute;
   left: 100%;
z-index: 200;
    padding: 0;
        width: 100%; // На всю ширину.   добавил

} Как можно заметить уперлись мы в размер все равно родителя (.menu .menu-item > a), это 230px.

UPD 3 вариант ваш как и хотели позиционировать и абсолют + по контенту размера но но мы не можем превысить размер нашего родителя https://jsfiddle.net/9m6ahw1n/7/

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

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

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

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

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

Почта

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

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

Почта

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

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

Position

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

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

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

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