twitter-bootstrap 如何使列大小小于 col-xx-1
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26337659/
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
How to get column size smaller than col-xx-1
提问by Pradeep Saini
Here is my output : http://jsbin.com/zuxipa/1/
这是我的输出：http: //jsbin.com/zuxipa/1/
Basically,I want the 2nd div inside the row to be smaller(its currently at col-md-1).How can I do that?
基本上，我希望行内的第二个 div 更小（它目前在 col-md-1）。我该怎么做？
回答by tmg
You can nest columns inside your <div class="col-md-1"></div>if you wrap them with a row
<div class="col-md-1"></div>如果你用一行包裹它们，你可以在你的内部嵌套列
example:
例子：
<div class="col-md-1">
<div class="row">
<div class="col-md-6">
2.1 col
</div>
</div>
</div>
回答by CyberGenesis
I know it's late, but I was looking at ways to handle this and came across this question, so I thought I'd share my solution.
我知道已经晚了，但我正在寻找处理这个问题的方法并遇到了这个问题，所以我想我会分享我的解决方案。
As far as I could find, there is no default way to handle this scenario in Bootstrap. What I did was removed the .col-xclasses, but kept the rowclass. I then added a custom class to the sections and used percentage widths for the row I was dealing with. I ended up with the following:
据我所知，在 Bootstrap 中没有处理这种情况的默认方法。我所做的是删除了.col-x课程，但保留了row课程。然后我向这些部分添加了一个自定义类，并为我正在处理的行使用了百分比宽度。我最终得到了以下结果：
<style>
.section-1, .section-3 {
width: 47%;
}
.section-2 {
width: 6%;
}
</style>
<div class="container">
<div class="row">
<div class="section-1">
<!-- Content Here -->
</div>
<div class="section-2">
<!-- Content Here -->
</div>
<div class="section-3">
<!-- Content Here -->
</div>
</div>
</div>
Keep in mind that this in not responsive by default, but it would be easy to adjust the width percentages with media queries in CSS.
请记住，默认情况下这不是响应式的，但是在 CSS 中使用媒体查询调整宽度百分比会很容易。
回答by Munkhdelger Tumenbayar
hello i made this for you. put your class into your div it is now twice shorter than before
你好，我为你做了这个。把你的班级放到你的 div 现在比以前短两倍
example: col-custom-1 < col-xx-1
例子： col-custom-1 < col-xx-1
.col-custom-1{
flex: 0 0 4.16666%;
max-width: 4.16666%;
}
.col-custom-2{
flex: 0 0 8.3333%;
max-width: 8.3333%;
}
.col-custom-3{
flex: 0 0 12.5%;
max-width: 12.5%;
}
.col-custom-4{
flex: 0 0 16.6666%;
max-width: 16.6666%;
}
.col-custom-5{
flex: 0 0 20.83333%;
max-width: 20.83333%;
}
.col-custom-6{
flex: 0 0 25%;
max-width: 25%;
}
.col-custom-7{
flex: 0 0 29.1666666667%;
max-width: 29.1666666667%;
}
.col-custom-8{
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.col-custom-9{
flex: 0 0 37.5%;
max-width: 37.5%;
}
.col-custom-10{
flex: 0 0 41.6666%;
max-width: 41.6666%;
}
.col-custom-11{
flex: 0 0 45.83333%;
max-width: 45.83333%;
}
.col-custom-12{
flex: 0 0 50%;
max-width: 50%;
}
.col-custom-13{
flex: 0 0 54.16666%;
max-width: 54.16666%;
}
.col-custom-14{
flex: 0 0 58.33333%;
max-width: 58.33333%;
}
.col-custom-15{
flex: 0 0 62.50000%;
max-width: 62.50000%;
}
.col-custom-16{
flex: 0 0 66.6666%;
max-width: 66.6666%;
}
.col-custom-17{
flex: 0 0 70.83333%;
max-width: 70.83333%;
}
.col-custom-18{
flex: 0 0 75.0000%;
max-width: 75.0000%;
}
.col-custom-19{
flex: 0 0 79.16666%;
max-width: 79.16666%;
}
.col-custom-20{
flex: 0 0 83.3333%;
max-width: 83.3333%;
}
.col-custom-21{
flex: 0 0 87.50000%;
max-width: 87.50000%;
}
.col-custom-22{
flex: 0 0 91.6666%;
max-width: 91.6666%;
}
.col-custom-23{
flex: 0 0 95.83333%;
max-width: 95.83333%;
}
.col-custom-24{
flex: 0 0 100%;
max-width: 100%;
}
