Aquí está la tarea de hacer desplazable horizontalmente en una fila de arranque.
Se puede hacer con el siguiente enfoque:
Acercarse:
- Haciendo todo el elemento div en línea usando display: inline-block; propiedad
- Agregando la barra de desplazamiento a todo el elemento div usando overflow-x: auto; propiedad.
- espacios en blanco: nowrap; La propiedad se usa para hacer todos los div en una sola línea.
Ejemplo :
<!DOCTYPE html> <html lang="en"> <head> <title>How to make horizontal scrollable in a bootstrap row?</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <style> /* The heart of the matter */ .horizontal-scrollable > .row { overflow-x: auto; white-space: nowrap; } .horizontal-scrollable > .row > .col-xs-4 { display: inline-block; float: none; } /* Decorations */ .col-xs-4 { color: white; font-size: 24px; padding-bottom: 20px; padding-top: 18px; } .col-xs-4:nth-child(2n+1) { background: green; } .col-xs-4:nth-child(2n+2) { background: black; } </style> </head> <body> <center> <div class="container"> <h1 style="text-align:center;color:green;"> GeeksforGeeks </h1> <h3> To make horizontal scrollable in a bootstrap row? </h3> <div class="container horizontal-scrollable"> <div class="row text-center"> <div class="col-xs-4">1</div> <div class="col-xs-4">2</div> <div class="col-xs-4">3</div> <div class="col-xs-4">4</div> <div class="col-xs-4">5</div> <div class="col-xs-4">6</div> <div class="col-xs-4">7</div> </div> </div> </div> </center> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA