Реагирующая сетка Bootstrap-4 не сжимается

Кажется, я не могу разбить сетку на 1 изображение за строку sm.

Это мое первое испытание с бутстрапом 4, я перешел через систему сетки, и он заявил, что повторные разрывы происходят при суффиксах размера для каждого. col-Но я не вижу никакого поломки.

На большом экране:

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

Для меньшего экрана:

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

HTML

<div class="container-fluid text-right">
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <div class="card mb-3">
                <div class="card-img"
                     style="background-image:url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg);">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-between">
                    <h4 class="card-title">das das</h4>
                    <p class="card-text">lorem oirrwerwer asdf asfd</p>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-6">
            <div class="card mb-3">
                <div class="card-img"
                     style="background-image:url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg);">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-between">
                    <h4 class="card-title">das das</h4>
                    <p class="card-text">lorem oirrwerwer asdf asfd</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.card {
  width: 100%;
  height: 300px;
  overflow: hidden;

}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: black; /* fallback color */
  background-position: center;
  background-size: cover;
  transition:all 0.3s ease-in-out;
  opacity:1;
}
.card:hover .card-img,
.card:focus .card-img {
  transform: scale(1.2);
  opacity:0.5;
}

.card:hover .card-img-overlay{
  color:#730d0d;
}

.card-img-overlay>h4, .card-img-overlay>p{
  visibility:hidden;
}

.card-img-overlay:hover h4, .card-img-overlay:hover p{
  visibility: visible;
}

.card:hover .card-img-overlay p{

}

html,css,bootstrap-4,

0

Ответов: 3

3 принят

Проблема заключается в отсутствии

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

в headтеге.

0

РЕДАКТИРОВАТЬ:

Хороший взгляд Михал Драбейк в ответ. Это как раз и проблема. Когда я вставлял ваш код в новый проект Bootstrap, метафайл просмотра был уже заполнен, поэтому я даже не заметил.

ОРИГИНАЛ:

Возможно, попробуйте проверить его в браузере, чтобы убедиться. Я скопировал и вставил ваш код без изменений в совершенно новую среду бутстрапа в Dreamweaver, и он вел себя как нужно, как в собственном режиме просмотра, так и в нескольких разных тестах браузера. Я не вижу никаких проблем с самим кодом.

Единственное, что я могу думать о том , что ваш Bootstrap рамки каким - то образом поврежден (вы являются разработки в рамках начальной загрузки, не так ли?) Не видя связанный .css и .js файлы, которые трудно будет дать вам гораздо больше помощи. Возможно, попробуйте запустить свежий проект Bootstrap с нуля и вставьте вышеуказанный код там и посмотрите, есть ли у вас проблемы. Если вы этого не сделаете, и это работает, вы, вероятно, ввернули что-то в исходную структуру.

0

Это должно быть col-12не так col-xs/sm-12.

col-xs/sm-12 не существует в Bootstrap 4. - EDIT ... Это так, я ошибаюсь.

.card {
  width: 100%;
  height: 300px;
  overflow: hidden;

}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: black; /* fallback color */
  background-position: center;
  background-size: cover;
  transition:all 0.3s ease-in-out;
  opacity:1;
}
.card:hover .card-img,
.card:focus .card-img {
  transform: scale(1.2);
  opacity:0.5;
}

.card:hover .card-img-overlay{
  color:#730d0d;
}

.card-img-overlay>h4, .card-img-overlay>p{
  visibility:hidden;
}

.card-img-overlay:hover h4, .card-img-overlay:hover p{
  visibility: visible;
}

.card:hover .card-img-overlay p{

}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" />

<div class="container-fluid text-right">
    <div class="row">
        <div class="col-12 col-md-6">
            <div class="card mb-3">
                <div class="card-img"
                     style="background-image:url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg);">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-between">
                    <h4 class="card-title">das das</h4>
                    <p class="card-text">lorem oirrwerwer asdf asfd</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="card mb-3">
                <div class="card-img"
                     style="background-image:url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg);">
                </div>
                <div class="card-img-overlay d-flex flex-column justify-content-between">
                    <h4 class="card-title">das das</h4>
                    <p class="card-text">lorem oirrwerwer asdf asfd</p>
                </div>
            </div>
        </div>
    </div>
</div>

HTML, CSS, самозагрузки-4,
Похожие вопросы
Яндекс.Метрика