我知道在Bootstrap中有12列网格。是否有办法操纵网格以得到1.5 3.5 3.5 3.5,而不是3 3 3 3?
您也可以简单地覆盖列的宽度...
<div class="col-md-1" style="width: 12.499999995%"></div>
由于col-md-1
的宽度为8.33333333%;只需将8.33333333 * 1.5相乘并将其设置为您的宽度即可。
在bootstrap 4
中,您还需要覆盖flex和max-width属性:
<div class="col-md-1" style="width: 12.499999995%;
flex: 0 0 12.499%;max-width: 12.499%;"></div>
ml-sm-auto
类仍然会忽略这个自定义宽度值 :/ (因此页面的响应性将会破坏)。 - Muflix正如@bodi0正确指出的那样,这是不可能的。你必须扩展Bootstrap的网格系统(你可以搜索并找到各种解决方案,这里有一个7列示例),或者使用嵌套行,例如http://bootply.com/dd50he9tGe。
在使用嵌套行的情况下,您可能无法始终获得精确的结果,但会得到类似的结果。
<div class="row">
<div class="col-lg-5">
<div class="row">
<div class="col-lg-4">1.67 (close to 1.5)</div>
<div class="col-lg-8">3.33 (close to 3.5)</div>
</div>
</div>
<div class="col-lg-7">
<div class="row">
<div class="col-lg-6">3.5</div>
<div class="col-lg-6">3.5</div>
</div>
</div>
</div>
行必须放置在.container
(固定宽度)或.container-fluid
(全宽)中,以实现正确的对齐和填充。
.row
和.col-xs-4
,可用于快速创建网格布局。更语义化的布局可以使用Less mixins。.rows
上的负边距,在第一列和最后一列中抵消该填充。.col-xs-4
。.col-md-*
类应用于元素不仅会影响其在中等设备上的样式,而且还会影响在大型设备上的样式,如果不存在.col-lg-*
类。解决问题的一个可能方法是定义自己的CSS类,带有所需的宽度,比如.col-half{width:XXXem !important}
,然后将此类添加到您想要的元素中,以及原始的Bootstrap CSS类。
Bootstrap 4使用flex-box,你可以创建自己的列定义
这接近1.5,根据自己的需求进行调整。
.col-1-5 {
flex: 0 0 12.3%;
max-width: 12.3%;
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
// replace * with a number between 0 and 11
col-*-1qtr
col-*-half
col-*-3qtr
请注意,您可以使用响应式类,例如:
col-sm-2-half
(2.5)col-md-0-3qtr
(0.75)col-lg-11-1qtr
(11.25)col-xl-5-half
(5.5)以下是示例:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hoomanbahreini/bootstrap-half-and-quarter-grid/fractional-grid.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Using fraction of columns</h2>
<div class="row">
<div class="col-2-3qtr bg-success">col-2-3qtr (2.75)</div>
<div class="col-3-1qtr bg-warning">col-3-1qtr (3.25)</div>
<div class="col-3-half bg-success">col-3-half (3.5)</div>
<div class="col-2-half bg-warning">col-2-half (2.5)</div>
</div>
</div>
</body>
</html>
//8,33333333% col-1
.extra-col {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.col-0-5 {
@extend .extra-col;
flex: 0 0 4.16666667%;
max-width: 4.16666667%;
}
.col-1-5 {
@extend .extra-col;
flex: 0 0 12.5%;
max-width: 12.5%;
}
.col-2-5 {
@extend .extra-col;
flex: 0 0 20.833333325%;
max-width: 20.833333325%;
}
.col-3-5 {
@extend .extra-col;
flex: 0 0 29.166666655%;
max-width: 29.166666655%;
}
.col-4-5 {
@extend .extra-col;
flex: 0 0 37.499999985%;
max-width: 37.499999985%;
}
.col-5-5 {
@extend .extra-col;
flex: 0 0 45.833333315%;
max-width: 45.833333315%;
}
.col-6-5 {
@extend .extra-col;
flex: 0 0 54.166666645%;
max-width: 54.166666645%;
}
.col-7-5 {
@extend .extra-col;
flex: 0 0 62.499999975%;
max-width: 62.499999975%;
}
.col-8-5 {
@extend .extra-col;
flex: 0 0 70.833333305%;
max-width: 70.833333305%;
}
.col-9-5 {
@extend .extra-col;
flex: 0 0 79.166666635%;
max-width: 79.166666635%;
}
.col-10-5 {
@extend .extra-col;
flex: 0 0 87.499999965%;
max-width: 87.499999965%;
}
.col-11-5 {
@extend .extra-col;
flex: 0 0 95.8333333%;
max-width: 95.8333333%;
}
创建新的类来覆盖宽度。请查看jFiddle以获取可工作的代码。
<div class="row">
<div class="col-xs-1 col-xs-1-5">
<div class="box">
box 1
</div>
</div>
<div class="col-xs-3 col-xs-3-5">
<div class="box">
box 2
</div>
</div>
<div class="col-xs-3 col-xs-3-5">
<div class="box">
box 3
</div>
</div>
<div class="col-xs-3 col-xs-3-5">
<div class="box">
box 4
</div>
</div>
</div>
.col-xs-1-5 {
width: 12.49995%;
}
.col-xs-3-5 {
width: 29.16655%;
}
.box {
border: 1px solid #000;
text-align: center;
}
Bootstrap有列偏移量,所以如果您想要等宽的列而不指定大小,请使用此功能。
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
同时请查看此链接 https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints
正如其他人在Bootstrap 3中提到的那样,您可以使用嵌套/嵌入技术。
然而,现在更明显地使用Bootstrap 4的非常棒的功能。您可以简单地使用col-{breakpoint}-auto
类(例如col-md-auto
)来使列根据其内容的自然宽度自动调整大小。查看this for example
.col-side-right{
flex: 0 0 20% !important;
max-width: 20%;
}
.col-side-left{
flex: 0 0 80%;
max-width: 80%;
}