Sé que ya ha habido preguntas sobre este tema, pero ninguna de las soluciones que encontré aquí fue útil. Espero que alguien pueda ayudarme aquí: Tengo una fila con 4 columnas de datos de la siguiente manera: ingrese la descripción de la imagen aquí

Aquí está el código:

<hr class="mb-4">
    <div>
        <h3>{{ player.full_name }}</h3>
        <h4> {{ player.position }}</h4>
        <h5> {{ player.team }}</h5>
    </div>
    <hr class="mb-4">
    <div class="row">
        <div class="col-xs-3 col-sm-3">
            <div class="text-center font-weight-bold">
                Form
            </div>
            <div class="text-center ">
                {{ player.form }}
            </div>
        </div>
        <div class="col-xs-3 col-sm-3">
            <div class="text-center font-weight-bold">
                Price
            </div>
            <div class="text-center">
                <span>&#163;</span>{{ player.price }}
            </div>
        </div>
        <div class="col-xs-3 col-sm-3">
            <div class="text-center font-weight-bold">
                Total
            </div>
            <div class="text-center">
                {{ player.total_points }}
            </div>
        </div>
        <div class="col-xs-3 col-sm-3">
            <div class="text-center font-weight-bold">
                TSB
            </div>
            <div class="text-center">
                {{ player.tsb }}%
            </div>
        </div>
    </div>

Según tengo entendido, las 4 columnas deben mantenerse en una fila, incluso en pantallas más pequeñas, especialmente porque definitivamente hay suficiente espacio para mostrarlas todas juntas. En pantallas pequeñas esto es lo que obtengo: ingrese la descripción de la imagen aquí

Nada de lo que cambio parece ayudar en este asunto. Me gustaría que todas las columnas se muestren en la misma fila, incluso en pantallas más pequeñas. Aprecio tu ayuda

Editar La fuente del problema está en mi página.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/v/bs4/dt-1.10.20/b-1.6.1/cr-1.5.2/r-2.2.3/sl-1.3.1/datatables.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.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.20/b-1.6.1/cr-1.5.2/r-2.2.3/sl-1.3.1/datatables.min.js"></script>
</head>

Entonces, el problema es cuando se usa la etiqueta Bootstrap 4 en lugar de Bootstrap 3 como en el ejemplo a continuación. ¿Eso es por diseño?

0
Nir Schachter 17 feb. 2020 a las 01:43

2 respuestas

La mejor respuesta

Si desea que esté en 4 columnas en cualquier ancho de dispositivo, simplemente use la clase col-3 en su lugar col-xs-3 col-sm-3

1
Yosef Tukachinsky 16 feb. 2020 a las 22:57

Parece que no puedo reproducir esto de mi parte. Supongo que hay alguna diferencia en tu CSS en alguna parte:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
    <!-- Bootstrap core CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
<hr class="mb-4">
    <div>
        <h3>Mohamed Salah</h3>
        <h4>Midfielder</h4>
        <h5>Liverpool</h5>
    </div>
    <hr class="mb-4">
    <div class="row">
        <div class="col-xs-3 col-sm-3">
            <div class="text-center font-weight-bold">
                Form
            </div>
            <div class="text-center ">
                7.5
            </div>
        </div>
        <div class="col-xs-3 col-sm-3">
            <div class="text-center font-weight-bold">
                Price
            </div>
            <div class="text-center">
                <span>&#163;</span>12.8
            </div>
        </div>
        <div class="col-xs-3 col-sm-3">
            <div class="text-center font-weight-bold">
                Total
            </div>
            <div class="text-center">
                165
            </div>
        </div>
        <div class="col-xs-3 col-sm-3">
            <div class="text-center font-weight-bold">
                TSB
            </div>
            <div class="text-center">
                45.3%
            </div>
        </div>
    </div>

    </div>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
  </body>
</html>

Pruébelo y vea: https://codepen.io/davidgbiggs/pen/JjdXpGq

0
David Biggs 16 feb. 2020 a las 23:00