Почему мои столбцы начальной загрузки обтекаются неравномерно?

ProgramBox

Почему мои столбцы начальной загрузки обтекаются неравномерно?

Post author:admin
Запись опубликована:18 ноября, 2022
Post category:Вопросы по программированию

#html #twitter-bootstrap #responsive

#HTML #twitter-bootstrap #отзывчивый

Вопрос:

У меня была проблема со строкой в bootstrap, которая обертывается совершенно неправильно.

На экранах настольных компьютеров 4 поля в ряд отображаются идеально. На экранах меньшего размера он меняется на 2 поля подряд. Идеальный. Но если размер левого поля в строке 1 больше из-за большего количества текста в нем, то третье поле исчезнет в строке 2 и будет отображаться в строке 3.

Если коробка 2 имеет больший размер, чем коробка 1, она полностью закрывается.

Я добавляю вам два изображения проблемы, а также облегченную версию кода

Это картина неудачи

failure_image

Это изображение правильного исполнения, которое я хотел бы иметь также на левых полях

right_image правильное изображение

И это и есть код

 <div class="container">
<div class="features-grids">
    <div class="col-md-3">
    <div class="feature">
        <div class="feature1">
            <a href="sites/story.php" style="text-decoration:none;">
                <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
                <h4>Unsere Story</h4>
            </a>
        </div>
        <div class="feature2">
            <p>Hier findet ihr einen Rückblick auf unser gemeinsames Leben</p>                                  </div>
    </div>
    </div>
    <div class="col-md-3">
    <div class="feature">
        <div class="feature1">
            <a href="sites/galerie_hochzeit.php" style="text-decoration:none;">
                <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
                <h4>Galerie</h4>
            </a>
        </div>
        <div class="feature2">
            <p>Hier findet ihr Fotos - Von vor und nach der Hochzeit</p>
        </div>
    </div>
    </div>
    <div class="col-md-3">
    <div class="feature">
        <div class="feature1">
            <a href="sites/hochzeit.php" style="text-decoration:none;">
                <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                <h4>Wichtigste Infos</h4>
            </a>
        </div>
        <div class="feature2">
            <p>Hier findet ihr alle wichtigen Infos zu unserem großen Tag</p>
        </div>
    </div>
    </div>
    <div class="col-md-3">
    <div class="feature">
        <div class="feature1">
            <a href="sites/wunschliste.php" style="text-decoration:none;">
                <span class="glyphicon glyphicon-gift" aria-hidden="true"></span>
                <h4>Wunschliste</h4>
            </a>
        </div>
        <div class="feature2">
            <p>Hier findet ihr die nützlichsten Geschenkideen für uns</p>
        </div>
    </div>
    </div>
    <div class="clearfix"></div>    
</div>

Я надеюсь, что вы сможете мне помочь.

1. @BurhamB. Солиман, здесь нет никаких указаний на то, что пользовательский CSS является фактором.

2. Рене, урок здесь заключается в том, чтобы всегда тщательно сравнивать свою разметку с разметкой Bootstrap demo. Вам не хватает элемента строки, как указывает мухаймин кхан ниже.

3. Пожалуйста, отметьте свою версию начальной загрузки.

4. Я прошу прощения за все свои ошибки, которые я сделал с вопросом: -D Спасибо всем за вашу помощь. мухаймин кхан был прав. Отсутствующим элементом строки был термин.

Ответ №1:

Во-первых, вы пропустили div с классом row между вашим col-md-3 и features-grids div. Также добавьте col-sm-6 col-md-3 все, что, надеюсь, будет работать нормально.

Проверьте это:

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

<div class="container">
<div class="features-grids">
  <div class="row">
    <div class="col-sm-6 col-md-3">
    <div class="feature">
        <div class="feature1">
            <a href="sites/story.php" style="text-decoration:none;">
                <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
                <h4>Unsere Story</h4>
            </a>
        </div>
        <div class="feature2">
            <p>Hier findet ihr einen Rückblick auf unser gemeinsames Leben</p>                                  </div>
    </div>
    </div>
    <div class="col-sm-6 col-md-3">
    <div class="feature">
        <div class="feature1">
            <a href="sites/galerie_hochzeit.php" style="text-decoration:none;">
                <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
                <h4>Galerie</h4>
            </a>
        </div>
        <div class="feature2">
            <p>Hier findet ihr Fotos - Von vor und nach der Hochzeit</p>
        </div>
    </div>
    </div>
    <div class="col-sm-6 col-md-3">
    <div class="feature">
        <div class="feature1">
            <a href="sites/hochzeit.php" style="text-decoration:none;">
                <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                <h4>Wichtigste Infos</h4>
            </a>
        </div>
        <div class="feature2">
            <p>Hier findet ihr alle wichtigen Infos zu unserem großen Tag</p>
        </div>
    </div>
    </div>
    <div class="col-sm-6 col-md-3">
    <div class="feature">
        <div class="feature1">
            <a href="sites/wunschliste.php" style="text-decoration:none;">
                <span class="glyphicon glyphicon-gift" aria-hidden="true"></span>
                <h4>Wunschliste</h4>
            </a>
        </div>
        <div class="feature2">
            <p>Hier findet ihr die nützlichsten Geschenkideen für uns</p>
        </div>
    </div>
    </div>
  </div>
    <div class="clearfix"></div>    
</div>

1. Скорее всего row , класс может быть добавлен к features-grids элементу.

2. Спасибо, чувак! Я сидел здесь часами.. Я пробовал также вариант col-sm-6 раньше, но он не работает. Я думаю о недостающем элементе строки.