Рубрики

Как исправить один столбец и прокрутить другой столбец или столбцы в Bootstrap?

Bootstrap предоставляет пользователям несколько встроенных функций. Это делает разработку быстрее и плавнее. Однако в некоторых случаях внешние CSS и jQuery должны быть реализованы в кодировке веб-страницы, чтобы придать ей индивидуальный подход. Обычно сетка Bootstrap используется для разделения веб-страницы на 12 равных столбцов. Эти столбцы можно сгруппировать, чтобы создать более широкие столбцы. Колонны носят адаптивный характер. Это означает, что столбцы будут покрывать весь экран на больших экранах, но будут накладываться друг на друга на устройствах с маленьким экраном.

Когда веб-страница разделена на два равных столбца, и содержимое внутри столбцов начинает переполняться, столбцы становятся прокручиваемыми. Однако, выполнив некоторые небольшие изменения, столбцы можно исправить. В этой статье будет показано, как сохранить один столбец фиксированным, а другой — прокручиваемым.

Синтаксис:

  • Чтобы исправить столбец сделать не прокручивать.
    <div class="col-sm-6 col-2 fixed-top one">
  • Чтобы сделать колонку прокручиваемой.
    <div class="col-sm-6 offset-sm-6 two">

Ниже приведен пример, иллюстрирующий вышеуказанный подход:

Пример: вы можете запустить код, нажав кнопку запуска, чтобы увидеть, что правая колонка прокручивается, а левая — нет.

<!DOCTYPE html>

<html>

    <head>

        <meta name="viewport"

              content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

        <script src=

"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

        </script>

        <script src=

"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">

        </script>

        <script src=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

        </script>

  

        <style>

            .one{

                background-color:lightgreen;

            }

            .two{

                background-color:green;

            }

            .container-fluid{

                font-size:120%;

            }

        </style>

    </head>

    <body>

        <div class="container-fluid">

            <div class="row">

                <div class="col-sm-6 col-2 fixed-top one">

                    <h2>Fixed</h2><br>

                    It is a good platform to learn programming. It is an 

                    educational website. Prepare for the Recruitment drive 

                    of product based companies like Microsoft, Amazon, 

                    Adobe etc with a free online placement preparation 

                    course. The course focuses on various MCQ's & Coding 

                    question likely to be asked in the interviews & make 

                    your upcoming placement season efficient and successful.

                    Also, any geeks can help other geeks by writing articles 

                    on the GeeksforGeeks, publishing articles follow few 

                    steps that are Articles that need little modification/ 

                    improvement from reviewers are published first. To 

                    quickly get your articles reviewed, please refer 

                    existing articles, their formatting style, coding 

                    style, and try to make you are close to them.

                    Adobe etc with a free online placement preparation 

                    course. The course focuses on various MCQ's & Coding 

                    question likely to be asked in the interviews & make 

                    your upcoming placement season efficient and successful.

                    Also, any geeks can help other geeks by writing articles 

                    on the GeeksforGeeks, publishing articles follow few 

                    steps that are Articles that need little modification/ 

                    improvement from reviewers are published first. To 

              </div>

              <div class="col-sm-6 offset-sm-6 two">

                    <h2>Scrollable</h2><br>

                    It is a good platform to learn programming. It is an 

                    educational website. Prepare for the Recruitment drive 

                    of product based companies like Microsoft, Amazon, 

                    Adobe etc with a free online placement preparation 

                    course. The course focuses on various MCQ's & Coding 

                    question likely to be asked in the interviews & make 

                    your upcoming placement season efficient and successful.

                    Also, any geeks can help other geeks by writing articles 

                    on the GeeksforGeeks, publishing articles follow few 

                    steps that are Articles that need little modification/ 

                    improvement from reviewers are published first. To 

                    quickly get your articles reviewed, please refer 

                    existing articles, their formatting style, coding 

                    style, and try to make you are close to them.

                    Adobe etc with a free online placement preparation 

                    course. The course focuses on various MCQ's & Coding 

                    question likely to be asked in the interviews & make 

                    your upcoming placement season efficient and successful.

                    Also, any geeks can help other geeks by writing articles 

                    on the GeeksforGeeks, publishing articles follow few 

                    steps that are Articles that need little modification/ 

                    improvement from reviewers are published first. To 

            </div>

        </div>

    </body>

</html>                    

Выход:

Рекомендуемые посты:

Как исправить один столбец и прокрутить другой столбец или столбцы в Bootstrap?

0.00 (0%) 0 votes