На моей веб-странице слева и справа есть свободное место. Как избавиться от этого?

Сначала я попытался сделать margin:0 и padding:0 для элемента body. Но это не сработало. Я проверил его, чтобы узнать, что происходит с инструментами разработчика Google. Я видел свой класс .container-fluid, который по умолчанию имеет некоторые свойства начальной загрузки, имеет отступы слева и справа. Поэтому, когда я пишу в инструментах разработчика; .container-fluid{ padding:0} работает, удаляет это свободное пространство. Но когда я делаю это в своем файле css, это не работает. Поскольку я не хотел использовать ключевое слово !important, потому что я думаю, что это должно было сработать... Итак, мне нужна ваша помощь, в чем моя ошибка? Спасибо.

.container-fluid {
    padding: 0; 
}
.title-image {
    width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python Bootcamp Web Page</title>
    <link rel="stylesheet" href="styles.css">

    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>


    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>


</head>
<body>
    <section >
        <div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
            <nav class="navbar navbar-expand-lg navbar-light bg-info">        
                <a class="navbar-brand" href="#">
                    <i class="fab fa-python"> Python Bootcamp</i>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Courses</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">How We Work</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Outcomes</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>

                    </ul>

                </div>
            </nav>

            <!-- Title -->
            <div class="row">
                <div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
                    <h1>Download the best bootcamp, and start to study now.</h1>
                    <button type="button" class="btn btn-lg btn-danger"><i class="fab fa-apple"></i> Download</button>
                    <button type="button" class="btn btn-lg btn-light"><i class="fab fa-google-play"></i> Download</button>

                </div>

                <div class="col-lg-6">
                    <img class="title-image" src="image.jpg" alt="classroom-image">
                </div>
            </div>
    </section>    
</body>
</html>


css bootstrap-5
person Community    schedule 09.01.2021    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Просто достаньте navbar из контейнера...

<section>
    <nav class="navbar navbar-expand-lg navbar-light bg-info">
        <a class="navbar-brand" href="#">
            <i class="fab fa-python"> Python Bootcamp</i>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Courses</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">How We Work</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Outcomes</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="container-fluid">
        <!--all of element appeared when i wrote navbar-expand-lg-->
        <!-- Title -->
        <div class="row g-0">
            <div class="col-lg-6">
                <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
                <h1>Download the best bootcamp, and start to study now.</h1>
                <button type="button" class="btn btn-lg btn-danger"><i class="fab fa-apple"></i> Download</button>
                <button type="button" class="btn btn-lg btn-light"><i class="fab fa-google-play"></i> Download</button>
            </div>
            <div class="col-lg-6">
                <img class="title-image" src="image.jpg" alt="classroom-image">
            </div>
        </div>
    </div>
</section>

Демо

Если вы также хотите удалить левое/правое пространство из области содержимого, используйте p-0 для контейнера и g-0 (без перегородок) для строки (в противном случае вы получите нежелательную горизонтальную прокрутку).

Также см.: контейнер-жидкость bootstrap 4 становится полностью обрезанным до края окна браузера

person Zim    schedule 09.01.2021
comment
Простое добавление body .container-fluid{ padding:0;} работало без проблем, если я не ошибаюсь. - person ; 09.01.2021
comment
Вы получаете горизонтальную полосу прокрутки - person Zim; 09.01.2021
comment
Ну, я сделал это специально, у меня есть горизонтальная полоса, потому что я добавил navbar-expand-lg в свой класс навигации. Вы сказали, что? или что-то у меня ошибка? - person ; 09.01.2021
comment
Я имею в виду горизонтальную полосу прокрутки браузера, а не панель навигации. - person Zim; 09.01.2021

arrow_upward
-1
arrow_downward

В этом случае лучше просто использовать !important. Или, если вы действительно этого не хотите, вы можете сделать селектор более конкретным (и, следовательно, более важным, чем загрузочный), добавив к нему body. Например:

body .container-fluid {
    padding: 0; 
}
.title-image {
    width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python Bootcamp Web Page</title>
    <link rel="stylesheet" href="styles.css">

    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>


    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>


</head>
<body>
    <section >
        <div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
            <nav class="navbar navbar-expand-lg navbar-light bg-info">        
                <a class="navbar-brand" href="#">
                    <i class="fab fa-python"> Python Bootcamp</i>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Courses</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">How We Work</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Outcomes</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>

                    </ul>

                </div>
            </nav>

            <!-- Title -->
            <div class="row g-0">
                <div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
                    <h1>Download the best bootcamp, and start to study now.</h1>
                    <button type="button" class="btn btn-lg btn-danger"><i class="fab fa-apple"></i> Download</button>
                    <button type="button" class="btn btn-lg btn-light"><i class="fab fa-google-play"></i> Download</button>

                </div>

                <div class="col-lg-6">
                    <img class="title-image" src="image.jpg" alt="classroom-image">
                </div>
            </div>
    </section>    
</body>
</html>

Обратите внимание, что для предотвращения горизонтальной прокрутки мне также пришлось добавить класс .g-0 к элементу .row.

person Jacob Lockard    schedule 09.01.2021
comment
Это вызывает горизонтальную полосу прокрутки - person Zim; 09.01.2021
comment
@Зим, спасибо. Я починил это. - person Jacob Lockard; 09.01.2021
comment
Спасибо @JacobLockard, более конкретно, как тело. контейнер-жидкость , сработало. Я не думал, что это сработает, так как я все еще говорю, что это класс, а не id или не такой, как другие конкретные селекторы. Еще раз спасибо. Но я не понял, почему вы добавили класс g-0. Что изменилось? - person ; 09.01.2021
comment
@Semih Причина, по которой body .container-fluid является более конкретным, чем просто .container-fluid, заключается в том, что количество типов селекторов также влияет на специфичность селектора. Этот ответ объясняет необходимость класса g-0. По сути, это предотвращает расширение элемента .row за пределы контейнера, вызывая нежелательную горизонтальную полосу прокрутки. - person Jacob Lockard; 09.01.2021