html - left - Bootstrap: diseño de 5 columnas
five columns bootstrap 3 (10)
5 columnas con Bootstrap 4
Aquí hay 5 columnas iguales de ancho completo ( sin CSS ni SASS ) usando la cuadrícula de diseño automático .
<div class="container-fluid">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>
</div>
http://www.codeply.com/go/MJTglTsq9h
Esta solución funciona porque Bootstrap 4 ahora es Flexbox. Puede obtener las 5 columnas para .row dentro del mismo .row usando un breakfix break como <div class="col-12"></div> o <div class="w-100"></div> muy 5 columnas
Estoy tratando de obtener un diseño de 5 columnas de ancho completo, pero no puedo encontrar la solución que se ajuste a mis necesidades
Aquí está el código que uso
<!-- Content Section -->
<div class="container">
<div class="row">
<div class="col-lg-12" style="border: 1px solid red">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-2 col-xs-offset-1" id="p1">One</div>
<div class="col-xs-2" id="p2">Two</div>
<div class="col-xs-2" id="p3">Three</div>
<div class="col-xs-2" id="p4">Four</div>
<div class="col-xs-2" id="p5">Five</div>
</div>
<!-- //col-lg-12 -->
</div>
<!-- //row -->
lorem
</div>
</div>
<!-- //col-lg-12 -->
</div>
<!-- //row -->
</div>
<!-- //container -->
Y esto es lo que estoy tratando de lograr. Diseño de 5 columnas de ancho completo con un espacio entre cada columna
A veces me piden que use algunos diseños de cuadrícula bastante extraños en los sitios web de bootstrap existentes (sin estropear el código actual). Lo que he hecho es crear un archivo CSS separado que puedo incluir en proyectos de arranque actuales y usar los estilos de diseño de cuadrícula allí. Esto es lo que contiene el archivo bootstrap-5ths.css junto con un ejemplo de cómo funciona la versión 4 de bootstrap.
Si desea usar esto con la versión 3 de bootstrap, simplemente elimine los estilos col-xl- * y cambie los min-widths de 576px a 768px, 768px a 992px y 992px a 1200px.
.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths, .col-xl-5ths,
.col-xs-two5ths, .col-sm-two5ths, .col-md-two5ths, .col-lg-two5ths, .col-xl-two5ths,
.col-xs-three5ths, .col-sm-three5ths, .col-md-three5ths, .col-lg-three5ths, .col-xl-three5ths,
.col-xs-four5ths, .col-sm-four5ths, .col-md-four5ths, .col-lg-four5ths, .col-xl-four5ths,
.col-xs-five5ths, .col-sm-five5ths, .col-md-five5ths, .col-lg-five5ths, .col-xl-five5ths,
{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 576px) {
.col-sm-5ths {width: 20%;float: left;}
.col-sm-two5ths {width: 40%;float: left;}
.col-sm-three5ths {width: 60%;float: left;}
.col-sm-four5ths {width: 80%;float: left;}
}
@media (min-width: 768px) {
.col-md-5ths {width: 20%;float: left;}
.col-md-two5ths {width: 40%;float: left;}
.col-md-three5ths {width: 60%;float: left;}
.col-md-four5ths {width: 80%;float: left;}
}
@media (min-width: 992px) {
.col-lg-5ths {width: 20%;float: left;}
.col-lg-two5ths {width: 40%;float: left;}
.col-lg-three5ths {width: 60%;float: left;}
.col-lg-four5ths {width: 80%;float: left;}
}
@media (min-width: 1200px) {
.col-xl-5ths {width: 20%;float: left;}
.col-xl-two5ths {width: 40%;float: left;}
.col-xl-three5ths {width: 60%;float: left;}
.col-xl-four5ths {width: 80%;float: left;}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-5ths">1</div>
<div class="col-md-5ths">1</div>
<div class="col-md-5ths">1</div>
<div class="col-md-5ths">1</div>
<div class="col-md-5ths">1</div>
</div>
<div class="row">
<div class="col-md-5ths">1</div>
<div class="col-md-two5ths">2</div>
<div class="col-md-two5ths">2</div>
</div>
<div class="row">
<div class="col-md-three5ths">3</div>
<div class="col-md-two5ths">2</div>
</div>
<div class="row">
<div class="col-md-four5ths">4</div>
<div class="col-md-5ths">1</div>
</div>
<div class="row">
<div class="col-md-five5ths">5</div>
</div>
</div>
Eche un vistazo a esta página para obtener información general sobre el diseño de Boostrap http://getbootstrap.com/css/#grid-offsetting
Prueba esto:
<div class="col-xs-2" id="p1">One</div>
<div class="col-xs-3">
<div class="col-xs-8 col-xs-offset-2" id="p2">Two</div>
</div>
<div class="col-xs-2" id="p3">Three</div>
<div class="col-xs-3">
<div class="col-xs-8 col-xs-offset-2" id="p4">Four</div>
</div>
<div class="col-xs-2" id="p5">Five</div>
He dividido el ancho en 5 div desigual con col-xs- 2,3,2,3,2 respectivamente. Los dos div con col-xs-3 son 1.5x el tamaño del col-xs-2 div , por lo que el ancho de la columna debe ser 2 / 3x ( 1.5 x 2/3 = 1 ) el ancho col-xs-3 para empareja el resto.
La mejor manera de hacerlo honestamente es cambiar la cantidad de columnas que tienes en lugar de tratar de modificar 5 en 12.
El mejor número que probablemente puedas usar es 20 ya que es divisible por 2, 4 y 5.
Entonces en sus variables.less Busque: @grid-columns: 12 y cambie esto a 20 .
Luego cambia tu html a:
<div class="row">
<div class="col-xs-20">
<div class="col-xs-4" id="p1">One</div>
<div class="col-xs-4" id="p2">Two</div>
<div class="col-xs-4" id="p3">Three</div>
<div class="col-xs-4" id="p4">Four</div>
<div class="col-xs-4" id="p5">Five</div>
</div>
<!-- //col-lg-20 -->
</div>
Yo personalmente usaría display: flex para esto ya que bootstrap no está diseñado para una división de 5 columnas.
Ponga un poco de margin-left en todos los divs verdes pero no en el primero
Solo agrega esto a tu CSS
/* 5 Columns */
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-15 {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}
Versión copiable de la solución de 5 colours de wearesicc con variables de arranque:
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
}
.col-xs-15 {
width: 20%;
float: left;
}
@media (min-width: $screen-sm) {
.col-sm-15 {
width: 20%;
float: left;
}
}
@media (min-width: $screen-md) {
.col-md-15 {
width: 20%;
float: left;
}
}
@media (min-width: $screen-lg) {
.col-lg-15 {
width: 20%;
float: left;
}
}
puede usar lo siguiente en bootstrap3:
<div class="row">
<div class="col-md-2 col-md-offset-1">One</div>
<div class="col-md-2">Two</div>
<div class="col-md-2">Three</div>
<div class="col-md-2">Four</div>
<div class="col-md-2">Five</div>
</div>
CSS
.bg{
background-color: #9DC3E6;
border-radius: 10px;
color: #fff;
padding: 15px;
}
.col-xs-5-cols,
.col-sm-5-cols,
.col-md-5-cols,
.col-lg-5-cols {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5-cols {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-5-cols {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5-cols {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5-cols {
width: 20%;
float: left;
}
}
html
<div className="row">
<div className="col-md-5-cols">1<div className="bg"></div></div>
<div className="col-md-5-cols">2<div className="bg"></div></div>
<div className="col-md-5-cols">3<div className="bg"></div></div>
<div className="col-md-5-cols">4<div className="bg"></div></div>
<div className="col-md-5-cols">5<div className="bg"></div></div>
</div>
.col-xs-2{
background:#00f;
color:#FFF;
}
.col-half-offset{
margin-left:4.166666667%
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="border: 1px solid red">
<div class="col-xs-2" id="p1">One</div>
<div class="col-xs-2 col-half-offset" id="p2">Two</div>
<div class="col-xs-2 col-half-offset" id="p3">Three</div>
<div class="col-xs-2 col-half-offset" id="p4">Four</div>
<div class="col-xs-2 col-half-offset" id="p5">Five</div>
<div>lorem</div>
</div>
</div>
Esto debería estar bien.