Блог

Главная - Вопросы по программированию - как я могу сделать свой загрузочный код отзывчивым?

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

#html #twitter-bootstrap #responsive

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

Вопрос:

Я получил эту задачу, используя bootstrap my task

это мой код, который я пробовал:

https://snipboard.io/aA8pfb.jpg

 <body>    <div class="container">
        <div class="row" style="height: 300px">
            <div class="col-lg-6 col-sm-8 h2 bg-primary">1</div>
            <div class="mid w-50">
                <div class="row ml-0 pb-2" style="height: 150px">
                    <div class="col-lg-4 col-sm-6 h2 bg-success">2</div>
                    <div class="col-lg-4 col-sm-6 h2 bg-danger">3</div>
                </div>
                <div class="row ml-0" style="height: 150px">
                    <div class="col-lg-4 col-sm-6 h2 bg-warning">4</div>
                    <div class="col-lg-4 col-sm-6 h2 bg-secondary">5</div>
                </div>
            </div>
        </div>
</div>

и это не сработало, вот результат, который я получил, используя этот код:
https://snipboard.io/YVRg84.jpg

Что я сделал не так? Как я могу сделать его отзывчивым, как на этой картинке? И почему в моем коде есть пространство, от которого я не могу избавиться между двумя строками? Спасибо!

Ответ №1:

попробуйте это —

 <div class="container">
    <div class="row" style="height: 300px">
        <div class="col-lg-6 col-12 h2 bg-primary">1</div>
        <div class="mid w-50 col-12 col-lg-6 ">
            <div class="row ml-0 pb-2" style="height: 150px">
                <div class="col-lg-4 col-sm-6 h2 bg-success">2</div>
                <div class="col-lg-4 col-sm-6 h2 bg-danger">3</div>
            </div>
            <div class="row ml-0" style="height: 150px">
                <div class="col-lg-4 col-sm-6 h2 bg-warning">4</div>
                <div class="col-lg-4 col-sm-6 h2 bg-secondary">5</div>
            </div>
        </div>
    </div>

также, чтобы удалить интервал, который вы, вероятно, неправильно используете, пожалуйста, проверьте свой код в браузере и поэкспериментируйте с высотой div, это решит вашу проблему с интервалом.