javascript - mensajes - danger warning bootstrap
Cómo crear una columna de ancho dinámico en Twitter Bootstrap (4)
Estructura similar a una tabla con la etiqueta de tabla anterior
Es una broma, o no lo soy.
<table class="table">
<tr><th>Id</th> <th>Name</th> <th>Email address</th></tr>
<tr><td>100001</td> <td>Joe</td> <td>[email protected]</td></tr>
<tr><td>100</td> <td>Christine</td> <td>[email protected]</td></tr>
<tr><td>1001</td> <td>John</td> <td>[email protected]</td></tr>
</table>
Usando el sistema de cuadrícula
En la documentación sobre el sistema de grilla de arranque no pude encontrar ningún bloque de construcción de ancho automático. Todo lo que está fuera de la caja tiene un cierto ancho y un número fijo de columnas:
<div class="row">
<div class="span2">ID</div>
<div class="span2">Name</div>
<div class="span8">E-Mail</div>
</div>
<div class="row">
<div class="span2">100001</div>
<div class="span2">Joe</div>
<div class="span8">[email protected]</div>
</div>
<div class="row">
<div class="span2">100</div>
<div class="span2">Christine</div>
<div class="span8">[email protected]</div>
</div>
Por lo tanto, supongo que debe crear su propia versión para una tabla de 3 columnas con tamaño automático.
En mi demo la columna de cuadrícula se ajusta si el espacio es angosto o, si el espacio es demasiado ancho, las columnas se estiran.
Actualización con marcado creativo
Actualicé mi demo con una clase personalizada. El marcado creativo se acerca a lo que estás buscando
<div class="row">
<div class="spanFl">100000001 <br />
100
</div>
<div class="spanFl">Joe <br/>
Christine
</div>
<div class="spanFl">[email protected] <br />
[email protected]
</div>
</div>
Usando la tabla de visualización css-3
En tutsplus encontré un artículo que usa css-3 display:table para configurar una tabla como el diseño. A menos que use tres divs para cada fila, no resuelve los problemas de envolver filas.
#content {
display: table;
}
#mainContent {
display: table-cell;
width: 620px;
padding-right: 22px;
}
aside {
display: table-cell;
width: 300px;
}
Diseño receptivo Bootstrap
Por lo que he entendido la documentación del bootstrap, no existe un soultion incorporado para un diseño de 3 columnas con auto y ancho restante. Para citar la página de diseño receptivo en bootstrap: "Utilice consultas de medios de manera responsable y solo como un comienzo para su público móvil. Para proyectos más grandes, considere bases de códigos dedicadas y no capas de consultas de medios".
¿Podría explicar más por qué no puede usar una mesa?
¿Cómo se usa Twitter Bootstrap para crear una estructura de listas tipo tabla, donde algunas columnas ocupan tanto espacio como se requiere para acomodar el elemento más ancho de esa columna, y una sola columna ocupa el espacio restante?
Por ejemplo:
Id |Name |Email address
100001|Joe |[email protected]
100 |Christine|[email protected]
1001 |John |[email protected]
la columna Id solo ocupa suficiente espacio para acomodar la identificación 100001, que es la identificación más larga.
La columna Nombre ocupa el espacio suficiente para acomodar el nombre de Christine.
La columna Correo electrónico toma el espacio restante.
Bueno, de acuerdo con la documentación de bootstrap puede aplicar la clase css que table-responsive a la tabla al elemento table y hacerlo receptivo. Lo que observé fue que realmente puede hacer scroll.
Como otros dijeron, debes usar tablas regulares donde tengan sentido. Además, CSS3 display: table puede ser una buena solución.
Dependiendo del caso de uso, hay una solución diferente que podría considerar:
https://github.com/donquixote/bootstrap-autocolumns/blob/master/bootstrap-autocolumns.css
Esta es una pieza de CSS que agrega "col-sm-auto" además de "col-sm-1", "col-sm-5", etc.
(Cajero automático, recomendaría simplemente copiar esto en un archivo css personalizado y ajustarlo a sus necesidades).
Ejemplo
<div class="row">
<div class="col-xs-auto">Left</div>
<div class="col-xs-auto-right">Right</div>
<div class="col-middle">Middle</div>
</div>
Aquí hay un violín: http://jsfiddle.net/9wzqz/
Idea
- .col - * - auto flota a la izquierda, con el relleno típico, pero sin ningún ajuste de ancho explícito.
- .col - * - autoderecha flota a la derecha en su lugar.
- .col-middle tiene display: table, que le impide flotar alrededor de los otros elementos.
- Use "xs", "sm", "md", "lg" para apuntar a anchos de pantalla específicos.
Limitaciones
Las columnas izquierda / derecha se expandirán al ancho completo si las completa con texto largo. Es mejor usarlos para cosas de ancho fijo como imágenes.
La columna del medio solo tomará el ancho completo disponible si tiene suficiente contenido.
si no necesita limitar el tamaño de la columna, simplemente puede deshabilitar el ancho.
<span class="col-xs-1" style="width: inherit !important; ">unknown ...</span>
Necesito la definición de bootstrap para las propiedades de la otra columna (relleno, altura, etc.), así que agregué una definición de columna, pero una unidad pequeña (col-xs-1).
notas:
- la cláusula "! important" podría abandonarse (no estoy seguro)
- En mi proyecto, se sabe que los textos son pequeños de todos modos.