¿Cómo hacer que se pueda desplazar horizontalmente en una fila de arranque?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *