Es display: inline-block;una propiedad de diseño en CSS que no agrega un salto de línea después del elemento. Como resultado, los elementos pueden sentarse uno al lado del otro. La principal diferencia entre display: inline;y display: inline-block;es que display: inline-block;también nos permite establecer el ancho y la altura del elemento.
Podemos evitar que los divs de bloques en línea se ajusten agregando clases de Bootstrap adecuadas. Entendamos esto con la ayuda de un ejemplo:
Ejemplo 1: tenemos que mostrar varias tablas que se han diseñado utilizando clases de filas y columnas de arranque adecuadas. El problema sería que si hay varias tablas en la misma fila, Bootstrap cerraría la fila y empujaría la siguiente tabla a la siguiente fila si no encaja en línea (esto sucede si el tamaño de la pantalla es pequeño). Pero queremos que estas tablas estén en la misma fila para todos los tamaños de pantalla (es decir, no queremos que los elementos del bloque en línea pasen a la siguiente fila).
Enfoque: para hacer esto, tenemos que escribir la etiqueta de la tabla junto con la clase Bootstrap llamada table-responsive para cada tabla. Esta clase hace que todas las tablas respondan para que estén en el mismo lugar para todos los tipos de pantallas (desde xs-lg) y si el tamaño de la pantalla es pequeño para adaptarse a las tablas, las tablas obtienen automáticamente una barra de desplazamiento horizontal y el usuario puede mire el contenido adicional de la tabla desplazándose hacia la derecha. Esto también evita la superposición de tablas y hace que la página se vea limpia.
Sintaxis:
<div class="table-responsive">
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>
Prevent inline-block
divs from wrapping
</title>
<style>
div {
display: inline-block;
}
</style>
</head>
<body>
<div class="row">
<div class="col-6">
<div class="table-responsive">
<table class="table table-stripped">
<!-- This is to make the table
have same colors for
alternate rows-->
<thead class="thead-dark">
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="table-responsive">
<table class="table table-stripped">
<thead class="thead-dark">
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="table-responsive">
<table class="table table-stripped">
<thead class="thead-dark">
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="table-responsive">
<table class="table table-stripped">
<thead class="thead-dark">
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-6">
<div class="table-responsive">
<table class="table table-stripped">
<thead class="thead-dark">
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Una cosa importante para recordar es que las tablas receptivas utilizan overflow-y: hidden, que recorta cualquier contenido que vaya más allá de los bordes inferior o superior de la tabla. Por lo tanto, si el tamaño de su tabla es grande y puede ir más allá de la parte inferior de la pantalla, sería mejor agregar overflow-y: autodentro de la etiqueta <style>.
En el código anterior, hemos usado https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css dentro de la etiqueta <head> para poder usar las clases de Bootstrap para hacernos la vida más fácil. Tenga en cuenta que también hemos agregado la clase «table table-responsive» a cada tabla para evitar que se ajuste.
Salida:
Para tamaño de pantalla normal:
Para tamaño de pantalla pequeño:
Esto también se puede hacer usando poco CSS.
Ejemplo usando texto: si tenemos mucho texto en un bloque div y queremos que el texto permanezca en la misma línea incluso después de que se reduzca el tamaño de la pantalla, podemos agregar una propiedad CSS llamada espacio en blanco y asignarle el valor nowrap Como se muestra abajo:
Enfoque: primero, tomamos una etiqueta <div> y le damos un nombre arbitrario para aplicar las propiedades CSS. Ambos divs aquí están llenos de texto. Aplicamos la white-space: nowrap;propiedad a la clase «a» que mantiene la línea de texto en la misma línea incluso si el tamaño de la pantalla es pequeño.
Sintaxis:
white-space: nowrap;
A continuación, aplicamos white-space: normal;cuál es el valor predeterminado para «espacio en blanco». Esto muestra el texto en varias líneas según el tamaño de la pantalla.
Sintaxis:
white-space: normal;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to prevent inline-block
divs from wrapping ?
</title>
<style>
.a {
white-space: nowrap;
}
.b {
white-space: normal;
}
</style>
</head>
<body>
<h1>The white-space Property</h1>
<h2>white-space: nowrap:</h2>
<div class="a">
Cascading Style Sheets, fondly
referred to as CSS, is a simply
designed language intended to
simplify the process of making
web pages presentable. CSS
allows you to apply styles to
web pages. More importantly,
CSS enables you to do this
independent of the HTML that
makes up each web page.
</div>
<h2>white-space: normal:</h2>
<div class="b">
Cascading Style Sheets, fondly
referred to as CSS, is a simply
designed language intended to
simplify the process of making
web pages presentable. CSS
allows you to apply styles to
web pages. More importantly,
CSS enables you to do this
independent of the HTML that
makes up each web page.
</div>
</body>
</html>
Producción:
Si intenta ejecutarlo en un IDE, puede notar que el texto dentro del primer bloque div que tiene white-space: nowrap;no se ajusta a la siguiente línea, incluso si el tamaño de la pantalla es pequeño. Por otro lado, el texto en la segunda etiqueta div se ajusta a la siguiente línea si no puede caber en la misma línea. Ejecute el código y juegue con él para comprender mejor el uso de nowrap.