Почему мои изображения выходят за пределы своих родительских столбцов?

Я создаю веб-приложение в asp.net и использую загрузочную версию 4 для макета сайта.

У меня есть следующий код, чтобы включить заголовок слева (с некоторым дополнительным текстом), а затем изображение справа, однако, когда я изменяю размер экрана, изображение перекрывает приветствие на сайте, прежде чем оно затем в конечном итоге складывает столбцы.

<div class="container-fluid">
    <div class="row portal-intro">
        <div class="col-md-4">
            <p class="home-header">Welcome to the site</p>
            <p>
                You can make a variety of applications, reports and requests by using our online forms.
                For example you can apply for resident permits, report an issue or you can request a call back.
            </p>
        </div>
        <div class="col-md-8">
            <img class="img-fluid" src="~/Content/Images/city.png" />

        </div>
    </div>

</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <h2>Getting started</h2>
            <p>
                ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
                enables a clean separation of concerns and gives you full control over markup
                for enjoyable, agile development.
            </p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Get more libraries</h2>
            <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Web Hosting</h2>
            <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
        </div>
    </div>
</div>

Я использовал img-fluid, чтобы увидеть, была ли проблема в этом, но это все еще происходит. Изображение в конечном итоге складывается, это просто промежуточный размер, где оно перекрывается, и это нормально, когда осыпь имеет полную ширину.

Я не добавлял никаких дополнительных CSS, так как это делается путем добавления класса img-fluid.

изображение при изменении размера

Возможно, стоит добавить, что я также пытался установить изображение на фон столбца, и он делает то же самое, предполагая, что может быть проблема со столбцом слева, а не с изображением.


html css bootstrap-4 grid-system
person werdna1    schedule 13.11.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема в том, что ваш текст настолько велик, что отдельные слова не помещаются в выделенное вами место в столбце. Уменьшите размер шрифта адаптивным способом, и все в порядке. Например:

@media (min-width: 768px) {
    .home-header {
        font-size: 30px;
    }
}

Демонстрация проблемы

Кроме того, вы должны использовать теги заголовков для заголовков. Семантическая структура документа важна.

person isherwood    schedule 13.11.2020