Html 我可以在引导程序中提供 col-md-1.5 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30026855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I give the col-md-1.5 in bootstrap?
提问by Sandhya Gor
I want to adjust the columns in Twitter Boοtstrap.
我想调整 Twitter Bootstrap 中的列。
I know in bootstrap there are 12 columns grid. Is there any way to manipulate the grids to have 1.5 3.5 3.5 3.5 instead of 3 3 3 3?
我知道在引导程序中有 12 列网格。有没有办法操纵网格有 1.5 3.5 3.5 3.5 而不是 3 3 3 3？
采纳答案by Tasos K.
As @bodi0 correctly said, it is not possible. You either have to extent Bootstrap's grid system (you can search and find various solutions, hereis a 7-column example) or use nested rows e.g. http://bootply.com/dd50he9tGe.
正如@bodi0 正确地说的那样，这是不可能的。您要么必须扩展 Bootstrap 的网格系统（您可以搜索并找到各种解决方案，这是一个 7 列示例）或使用嵌套行，例如http://bootply.com/dd50he9tGe。
In the case of nested rows you might not always get the exact result but a similar one
在嵌套行的情况下，您可能不会总是得到确切的结果，但会得到类似的结果
<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>
回答by Balraj Bains
You cloud also simply override the width of the Column...
您还可以简单地覆盖列的宽度...
<div class="col-md-1" style="width: 12.499999995%"></div>
Since col-md-1is of width 8.33333333%; simply multiply 8.33333333 * 1.5 and set it as your width.
由于col-md-1宽度为 8.33333333%；只需乘以 8.33333333 * 1.5 并将其设置为您的宽度。
in bootstrap 4, you will have to override flex and max-width property too:
在 中bootstrap 4，您还必须覆盖 flex 和 max-width 属性：
<div class="col-md-1" style="width: 12.499999995%;
flex: 0 0 12.499%;max-width: 12.499%;"></div>
回答by Bud Damyanov
The short answer is no(technically you can give whatever name of the class you want, but this will have no effect, unless you define your own CSS class - and remember - no dotsin the class selector). The long answer is again no, because Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columnsas the device or view port size increases.
简短的回答是否定的（从技术上讲，您可以给出您想要的任何类的名称，但这不会产生任何影响，除非您定义自己的 CSS 类 - 并记住 -类选择器中没有点）。答案是否定的，因为Bootstrap 包含一个响应式、移动优先的流体网格系统，随着设备或视口尺寸的增加，该系统可以适当地扩展到 12 列。
Rows must be placed within a .container(fixed-width) or .container-fluid(full-width) for proper alignment and padding.
行必须放置在.container（固定宽度）或.container-fluid（全宽）内，以便正确对齐和填充。
- Use rows to create horizontal groups of columns.
- Content should be placed within columns, and only columns may be immediate children of rows.
- Predefined grid classes like
.rowand.col-xs-4are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts. - Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on
.rows. - Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three
.col-xs-4. - If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
- Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any
.col-md-*class to an element will not only affectits styling on medium devices but also on large devices if a.col-lg-*class is not present.
- 使用行创建水平的列组。
- 内容应该放在列中，并且只有列可以是行的直接子项。
- 预定义的网格类如
.row和.col-xs-4可用于快速制作网格布局。更少的 mixin 也可以用于更多的语义布局。 - 列通过填充创建装订线（列内容之间的间隙）。该填充通过 上的负边距在第一列和最后一列的行中偏移
.rows。 - 网格列是通过指定要跨越的十二个可用列的数量来创建的。例如，三个相等的列将使用三个
.col-xs-4。 - 如果在一行中放置超过 12 列，则每组额外的列将作为一个单元换行到一个新行。
- 网格类适用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，例如，将任何
.col-md-*类应用于元素不仅会影响其在中型设备上的样式，而且如果.col-lg-*类不存在，也会影响大型设备。
A possible solution to your problem is to define your own CSS class with desired width, let's say .col-half{width:XXXem !important}then add this class to elements you want along with original Bootstrap CSS classes.
您的问题的一个可能解决方案是定义您自己的 CSS 类并具有所需的宽度，假设.col-half{width:XXXem !important}然后将此类添加到您想要的元素以及原始 Bootstrap CSS 类。
回答by Rex Bloom
Bootstrap 4 uses flex-box and you can create your own column definitions
Bootstrap 4 使用 flex-box，您可以创建自己的列定义
This is close to a 1.5, tweak to your own needs.
这接近于 1.5，根据您自己的需要进行调整。
.col-1-5 {
flex: 0 0 12.3%;
max-width: 12.3%;
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
回答by JCoupland
Create new classes to overwrite the width. See jFiddlefor working code.
创建新类以覆盖宽度。有关工作代码，请参阅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;
}
回答by Muhammad Soliman
As others mentioned in Bootstrap 3, you can use nest/embed techniques.
正如其他人在 Bootstrap 3 中提到的，您可以使用嵌套/嵌入技术。
However it is becoming more obvious to use pretty awesome feature from Bootstrap 4 now. you simple have the option to use the col-{breakpoint}-autoclasses (e.g. col-md-auto) to make columns size itself automatically based on the natural width of its content. check this for example
然而，现在使用 Bootstrap 4 中非常棒的功能变得越来越明显。您可以选择使用col-{breakpoint}-auto类（例如col-md-auto）根据其内容的自然宽度自动调整列的大小。例如检查这个
回答by Jenti Dabhi
This is not Bootstrap Standard to give col-md-1.5 and you can not edit bootstrap.min.css because is not right way. you can create like this http://www.bootply.com/125259
这不是给 col-md-1.5 的 Bootstrap 标准，你不能编辑 bootstrap.min.css 因为不是正确的方法。你可以像这样创建http://www.bootply.com/125259
回答by Vahid Alvandi
you can use this code inside col-md-3 , col-md-9
您可以在 col-md-3 、 col-md-9 中使用此代码
.col-side-right{
flex: 0 0 20% !important;
max-width: 20%;
}
.col-side-left{
flex: 0 0 80%;
max-width: 80%;
}
回答by Warwick
This question is quite old, but I have made it that way (in TYPO3).
这个问题很老了，但我已经这样做了（在TYPO3中）。
Firstly, I have made a own accessible css-class which I can choose on every content element manually.
首先，我创建了一个自己的可访问 css-class，我可以在每个内容元素上手动选择它。
Then, I have made a outer three column element with 11 columns (1 - 9 - 1), finally, I have modified the column width of the first and third column with CSS to 12.499999995%.
然后，我制作了一个包含 11 列 (1 - 9 - 1) 的外部三列元素，最后，我使用 CSS 将第一列和第三列的列宽修改为 12.499999995%。
