Bootstrap proporciona varias funciones integradas a los usuarios. Esto hace que el desarrollo sea más rápido y fluido. Sin embargo, en algunos casos, se debe implementar CSS externo y jQuery en la codificación de la página web para darle un toque personalizado. Por lo general, la cuadrícula Bootstrap se usa para dividir la página web en 12 columnas iguales. Estas columnas se pueden agrupar para crear columnas más anchas. Las columnas son de naturaleza receptiva. Esto significa que las columnas cubrirán toda la pantalla en pantallas grandes, pero se apilarán una encima de la otra en dispositivos de pantalla pequeña.
Cuando la página web se divide en dos columnas iguales y el contenido dentro de las columnas comienza a desbordarse, las columnas se vuelven desplazables. Sin embargo, haciendo algunas pequeñas modificaciones, las columnas se pueden arreglar. Este artículo demostrará cómo mantener una columna fija y la otra columna desplazable.
Sintaxis:
- Para arreglar la columna, haga que no se pueda desplazar.
<div class="col-sm-6 col-2 fixed-top one">
- Para hacer la columna desplazable.
<div class="col-sm-6 offset-sm-6 two">
El siguiente ejemplo ilustra el enfoque anterior:
Ejemplo: puede ejecutar el código presionando el botón Ejecutar para que pueda ver que la columna derecha se puede desplazar pero la izquierda no.
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por sanchit496 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA